5b9285a575
* Update Next.js and React versions in all packages * Replace onRedirect function with next/link in BillingSessionStatus, since it's no longer cached by default * Remove unused revalidatePath import in billing return page, since it's no longer cached by default * Add Turbopack module aliases to improve development server speed * Converted new Dynamic APIs to be Promise-based * Adjust mobile layout * Use ENABLE_REACT_COMPILER to enable the React Compiler in Next.js 15 * Report Errors using the new onRequestError hook
99 lines
2.3 KiB
TypeScript
99 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import dynamic from 'next/dynamic';
|
|
import Link from 'next/link';
|
|
|
|
import type { User } from '@supabase/supabase-js';
|
|
|
|
import { ArrowRightIcon } from 'lucide-react';
|
|
|
|
import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
|
|
import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
|
|
import { useUser } from '@kit/supabase/hooks/use-user';
|
|
import { Button } from '@kit/ui/button';
|
|
import { If } from '@kit/ui/if';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import featuresFlagConfig from '~/config/feature-flags.config';
|
|
import pathsConfig from '~/config/paths.config';
|
|
|
|
const ModeToggle = dynamic(
|
|
() =>
|
|
import('@kit/ui/mode-toggle').then((mod) => ({
|
|
default: mod.ModeToggle,
|
|
})),
|
|
{
|
|
ssr: false,
|
|
},
|
|
);
|
|
|
|
const paths = {
|
|
home: pathsConfig.app.home,
|
|
};
|
|
|
|
const features = {
|
|
enableThemeToggle: featuresFlagConfig.enableThemeToggle,
|
|
};
|
|
|
|
export function SiteHeaderAccountSection({
|
|
user,
|
|
}: React.PropsWithChildren<{
|
|
user: User | null;
|
|
}>) {
|
|
if (!user) {
|
|
return <AuthButtons />;
|
|
}
|
|
|
|
return <SuspendedPersonalAccountDropdown user={user} />;
|
|
}
|
|
|
|
function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
|
|
const signOut = useSignOut();
|
|
const user = useUser(props.user);
|
|
const userData = user.data ?? props.user ?? null;
|
|
|
|
if (userData) {
|
|
return (
|
|
<PersonalAccountDropdown
|
|
showProfileName={false}
|
|
paths={paths}
|
|
features={features}
|
|
user={userData}
|
|
signOutRequested={() => signOut.mutateAsync()}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return <AuthButtons />;
|
|
}
|
|
|
|
function AuthButtons() {
|
|
return (
|
|
<div className={'flex space-x-2'}>
|
|
<div className={'hidden space-x-0.5 md:flex'}>
|
|
<If condition={features.enableThemeToggle}>
|
|
<ModeToggle />
|
|
</If>
|
|
|
|
<Button asChild variant={'ghost'}>
|
|
<Link href={pathsConfig.auth.signIn}>
|
|
<Trans i18nKey={'auth:signIn'} />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<Button asChild className="group" variant={'default'}>
|
|
<Link href={pathsConfig.auth.signUp}>
|
|
<Trans i18nKey={'auth:signUp'} />
|
|
|
|
<ArrowRightIcon
|
|
className={
|
|
'ml-1 hidden h-4 w-4 transition-transform duration-500 group-hover:translate-x-1 lg:block'
|
|
}
|
|
/>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|