88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { createClient, isSupabaseConfigured } from "@/lib/supabase/client";
|
||
|
|
import Link from "next/link";
|
||
|
|
import type { User } from "@supabase/supabase-js";
|
||
|
|
|
||
|
|
interface Profile {
|
||
|
|
display_name?: string | null;
|
||
|
|
total_cost_usd?: number;
|
||
|
|
budget_cap_usd?: number;
|
||
|
|
daily_used?: number;
|
||
|
|
daily_quota?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function AuthBar() {
|
||
|
|
const [user, setUser] = useState<User | null>(null);
|
||
|
|
const [profile, setProfile] = useState<Profile | null>(null);
|
||
|
|
const [loaded, setLoaded] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!isSupabaseConfigured()) {
|
||
|
|
setLoaded(true);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const supabase = createClient();
|
||
|
|
supabase.auth.getUser().then(({ data }) => {
|
||
|
|
setUser(data.user);
|
||
|
|
setLoaded(true);
|
||
|
|
if (data.user) {
|
||
|
|
fetch("/api/me")
|
||
|
|
.then((r) => (r.ok ? r.json() : null))
|
||
|
|
.then((d) => setProfile(d?.profile ?? null))
|
||
|
|
.catch(() => {});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const { data: sub } = supabase.auth.onAuthStateChange((_e, session) => {
|
||
|
|
setUser(session?.user ?? null);
|
||
|
|
});
|
||
|
|
return () => sub.subscription.unsubscribe();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
if (!loaded) return null;
|
||
|
|
|
||
|
|
if (!isSupabaseConfigured()) {
|
||
|
|
return (
|
||
|
|
<div className="font-mono text-[10px] text-[#5a6678] uppercase tracking-widest">
|
||
|
|
auth: disabled (dev)
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!user) {
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
href="/auth/signin"
|
||
|
|
className="font-mono text-xs px-3 py-1 border border-[rgba(0,255,156,0.32)]
|
||
|
|
text-[#00ff9c] hover:bg-[rgba(0,255,156,0.08)] rounded"
|
||
|
|
>
|
||
|
|
sign in
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
{profile && (
|
||
|
|
<div className="font-mono text-[9px] text-[#5a6678] uppercase tracking-widest text-right">
|
||
|
|
<div>{profile.display_name ?? user.email}</div>
|
||
|
|
<div>
|
||
|
|
${(profile.total_cost_usd ?? 0).toFixed(2)} / ${(profile.budget_cap_usd ?? 0).toFixed(2)} ·{" "}
|
||
|
|
{profile.daily_used ?? 0}/{profile.daily_quota ?? 0} msgs today
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<form action="/auth/signout" method="POST">
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
className="font-mono text-[10px] px-2 py-1 text-[#8896aa] hover:text-[#ff3344]
|
||
|
|
border border-transparent hover:border-[#ff3344] rounded"
|
||
|
|
>
|
||
|
|
sign out
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|