342c96abfa
Major changes include enhancements to the UI and modifications to the i18n loading logic to more effectively handle namespaces. Several components were updated to improve readability and layout consistency. The i18n loading logic now includes additional handling for waiting until all namespaces are loaded before the i18n instance is returned, with a warning if it takes longer than expected. Furthermore, code have been refactored for fonts, buttons, and other UI elements.
95 lines
2.2 KiB
TypeScript
95 lines
2.2 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) => 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
|
|
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 h-4 w-4 transition-transform duration-500 group-hover:translate-x-1'
|
|
}
|
|
/>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|