@undp/create-app 0.2.1 → 0.2.3

package/bin/templates/next/auth/app/user/page.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import Image from 'next/image';
+import { Spinner } from '@undp/design-system-react/Spinner';
+import { P } from '@undp/design-system-react/Typography';
+import { Button } from '@undp/design-system-react/Button';
+
+import { useSession, signIn } from '@/lib/auth-client';
+
+export default function UserPage() {
+  const { data: session, isPending } = useSession();
+
+  if (isPending) {
+    return (
+      <div className='my-8 mx-aut'>
+        <Spinner />
+      </div>
+    );
+  }
+  const handleSignIn = async () => {
+    await signIn.social({
+      provider: 'microsoft',
+      callbackURL: '/user',
+    });
+  };
+
+  return (
+    <>
+      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+        <Image
+          className='dark:invert'
+          src='/imgs/next.svg'
+          alt='Next.js logo'
+          width={100}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/Tailwind_CSS_Logo.svg'
+          alt='Tailwind logo'
+          width={40}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/Zustand-logo.svg'
+          alt='Zustand logo'
+          width={40}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/undp-logo-blue.svg'
+          alt='UNDP logo'
+          width={40}
+          height={20}
+          priority
+        />
+      </div>
+      {!session ? (
+        <>
+          <P marginBottom='xl' className='text-center'>
+            Please sign in to view this page
+          </P>
+          <div className='flex justify-center'>
+            <Button variant='tertiary' onClick={handleSignIn}>
+              Sign In
+            </Button>
+          </div>
+        </>
+      ) : (
+        <P marginBottom='xl' className='text-center'>
+          Welcome, {session.user.name || session.user.email}!
+        </P>
+      )}
+    </>
+  );
+}