091454d273
All checks were successful
Deploy to Production / deploy (push) Successful in 51s
Logged-out state was showing two CTAs ("Sign in" link + "Start building"
button) both going to /login — confusing because the prominent purple
button never literally said "Login". Consolidate to one button whose
label flips with auth state: "Login" when out, "Dashboard" when in.
Same slot, same colour, no header layout shift.
Defaults to "Login" while the /v1/auth/me probe is in flight so the
common (anonymous) visitor sees no flicker.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { apiFetch } from '@/lib/api';
|
|
import Link from 'next/link';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
/**
|
|
* Marketing-header CTA that reflects the session: logged-out visitors see a
|
|
* "Login" button, signed-in users see "Dashboard". Same button slot so the
|
|
* header layout doesn't shift between states.
|
|
*
|
|
* While the auth probe is in flight (`authed === null`) we default to the
|
|
* logged-out label — most marketing-page visitors are anonymous, so this
|
|
* avoids a "Dashboard → Login" flicker for them. Authed users see a single
|
|
* "Login → Dashboard" swap once the /v1/auth/me round-trip completes.
|
|
*/
|
|
export function MarketingAuthButtons() {
|
|
const [authed, setAuthed] = useState<boolean | null>(null);
|
|
|
|
useEffect(() => {
|
|
apiFetch('/v1/auth/me')
|
|
.then(() => setAuthed(true))
|
|
.catch(() => setAuthed(false));
|
|
}, []);
|
|
|
|
const showDashboard = authed === true;
|
|
|
|
return (
|
|
<Link
|
|
href={showDashboard ? '/dashboard' : '/login'}
|
|
className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
|
|
>
|
|
{showDashboard ? 'Dashboard' : 'Login'}
|
|
</Link>
|
|
);
|
|
}
|