61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { cc } from '@/utility/css';
|
|
import Link from 'next/link';
|
|
import { useSession } from 'next-auth/react';
|
|
import ThemeSwitcher from '@/site/ThemeSwitcher';
|
|
import SiteGrid from '../components/SiteGrid';
|
|
import { usePathname } from 'next/navigation';
|
|
import { isPathSignIn } from '@/site/paths';
|
|
import { signOutAction } from '@/auth/action';
|
|
import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
|
|
|
|
const LINK_STYLE = cc(
|
|
'cursor-pointer',
|
|
'hover:text-gray-300',
|
|
'hover:dark:text-gray-600',
|
|
);
|
|
|
|
export default function FooterAuth() {
|
|
const { data: session, status } = useSession();
|
|
|
|
const path = usePathname();
|
|
|
|
return (
|
|
<SiteGrid
|
|
contentMain={<div className={cc(
|
|
'flex items-center',
|
|
'my-8',
|
|
'text-dim',
|
|
)}>
|
|
<div className="flex gap-x-4 gap-y-1 flex-wrap items-center flex-grow">
|
|
{status === 'loading'
|
|
? <>Loading ...</>
|
|
: <>
|
|
{session?.user?.email && <div>
|
|
{session.user.email}
|
|
</div>}
|
|
{status === 'authenticated' &&
|
|
<form action={signOutAction}>
|
|
<SubmitButtonWithStatus
|
|
className={LINK_STYLE}
|
|
styleAsLink
|
|
>
|
|
Sign Out
|
|
</SubmitButtonWithStatus>
|
|
</form>}
|
|
{status === 'unauthenticated' &&
|
|
<Link
|
|
href="/sign-in"
|
|
className={LINK_STYLE}
|
|
>
|
|
Sign In
|
|
</Link>}
|
|
</>}
|
|
</div>
|
|
{!isPathSignIn(path) && <ThemeSwitcher />}
|
|
</div>}
|
|
/>
|
|
);
|
|
};
|