style: add styling for pages and forms

app/api/protected/profile/route.ts

@@ -5,5 +5,8 @@ import { getSession, withApiAuthRequired } from '@auth0/nextjs-auth0';
 export const GET = withApiAuthRequired(async () => {
   const session = await getSession();
 
-  return NextResponse.json(session?.user);
+  return NextResponse.json({
+    success: true,
+    data: { email: session?.user.email }
+  });
 });

app/customer-form/[id]/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';
-import { Button } from '@components/Button';
 import { CustomerForm, CustomerFormSchema } from '@utils/types';
 import axios from 'axios';
 import { useRouter } from 'next/navigation';
@@ -61,9 +60,19 @@ export default withPageAuthRequired(function SingleCustomerForm({
   }
 
   return (
-    <>
+    <div className='mx-auto my-4 max-w-md'>
-      <div>Form {JSON.stringify(customerForm)}</div>
+      <div className='mb-2'>
-      <Button onClick={handleDelete}>Delete</Button>
+        <span className='text-lg font-bold'>Form data</span>
-    </>
+        <pre className='mt-2 rounded bg-gray-100 p-2'>
+          {JSON.stringify(customerForm, null, 2)}
+        </pre>
+      </div>
+      <button
+        onClick={handleDelete}
+        className='rounded bg-red-500 px-4 py-2 font-bold text-white hover:bg-red-700'
+      >
+        Delete
+      </button>
+    </div>
   );
 });

app/customer-form/page.tsx

@@ -85,36 +85,58 @@ export default withPageAuthRequired(function CustomerForms() {
   }
 
   return (
-    <>
+    <div className='mx-auto max-w-md'>
-      <h1>Forms</h1>
+      <div className='my-8'>
+        <h1 className='mb-4 text-2xl font-bold'>Forms</h1>
+        <div className='grid grid-cols-1 gap-4'>
           {customerForms &&
             customerForms.map(customerForm => (
               <div
+                className='cursor-pointer rounded-lg border p-4 hover:bg-gray-100'
                 onClick={() => redirectToCustomerForm(customerForm.id)}
                 key={customerForm.id}
               >
-            {customerForm.text}
+                <p className='font-semibold'>{customerForm.text}</p>
-            of type {customerForm.type}
+                <p className='text-sm text-gray-600'>
+                  Type: {customerForm.type}
+                </p>
               </div>
             ))}
-      <h1>New form</h1>
+        </div>
+      </div>
+
+      <div className='my-8'>
+        <h1 className='mb-4 text-2xl font-bold'>New form</h1>
         <FormProvider {...form}>
-        <form onSubmit={form.handleSubmit(handleSubmit)}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className='space-y-4'
+          >
             <FormField
               control={form.control}
               name='text'
               render={({ field }) => (
-              <FormItem>
+                <FormItem className='flex flex-col'>
                   <FormMessage />
                   <FormControl>
-                  <Input placeholder='name' {...field} />
+                    <Input
+                      placeholder='Name'
+                      {...field}
+                      className='rounded-lg border p-2'
+                    />
                   </FormControl>
                 </FormItem>
               )}
             />
-          <Button type='submit'>Create</Button>
+            <Button
+              type='submit'
+              className='rounded-lg bg-blue-500 p-2 text-white hover:bg-blue-600'
+            >
+              Create
+            </Button>
           </form>
         </FormProvider>
-    </>
+      </div>
+    </div>
   );
 });

app/login/page.tsx

@@ -1,8 +0,0 @@
-export default function SignIn() {
-  return (
-    <div>
-      <a href='/api/auth/login'>Login</a>
-      <a href='/api/auth/logout'>Logout</a>
-    </div>
-  );
-}

app/page.tsx

@@ -1,9 +1,74 @@
+'use client';
+
+import { useUser } from '@auth0/nextjs-auth0/client';
+import { ProfileSchema } from '@utils/types';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+
 export default function Home() {
+  const { user, error, isLoading } = useUser();
+
+  const [profile, setProfile] = useState('');
+
+  useEffect(() => {
+    (async () => {
+      if (!user) return;
+
+      const response = await axios.get('/api/protected/profile');
+
+      const validatedResponse = ProfileSchema.safeParse(response.data.data);
+
+      if (!validatedResponse.success) {
+        console.error(validatedResponse.error);
+        return;
+      }
+
+      setProfile(validatedResponse.data.email);
+    })();
+  }, [user]);
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>{error.message}</div>;
+
   return (
-    <main className='flex min-h-screen flex-col items-center justify-between p-24'>
+    <main className='flex min-h-screen flex-col items-center justify-center p-24'>
-      <h1 className='text-center text-4xl font-bold'>
+      <h1 className='mb-8 text-center text-4xl font-bold'>
         Next.js + Auth0 Starter
       </h1>
+      <nav className='text-center'>
+        {!user && (
+          <a
+            href='/api/auth/login'
+            className='inline-block rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600'
+          >
+            Login
+          </a>
+        )}
+        {user && (
+          <>
+            <div className='mb-6'>
+              <p className='text-lg'>
+                <strong>Logged in as:</strong>{' '}
+                {user.name || user.email || 'User'}
+              </p>
+            </div>
+            <div className='space-x-4'>
+              <a
+                href='/customer-form'
+                className='inline-block rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600'
+              >
+                Forms
+              </a>
+              <a
+                href='/api/auth/logout'
+                className='inline-block rounded bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600'
+              >
+                Logout
+              </a>
+            </div>
+          </>
+        )}
+      </nav>
     </main>
   );
 }

app/profile/page.tsx

@@ -1,24 +0,0 @@
-'use client';
-
-import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';
-import axios from 'axios';
-import { useEffect, useState } from 'react';
-
-export default withPageAuthRequired(function Profile() {
-  const [user, setUser] = useState();
-
-  useEffect(() => {
-    (async () => {
-      const response = await axios.get('/api/protected/profile');
-
-      setUser(response.data);
-    })();
-  }, []);
-
-  return (
-    <>
-      <h1>Profile (fetched from API)</h1>
-      {JSON.stringify(user, null, 2)}
-    </>
-  );
-});

utils/types.ts

@@ -1,5 +1,9 @@
 import { z } from 'zod';
 
+export const ProfileSchema = z.object({
+  email: z.string()
+});
+
 export const CustomerFormCreateSchema = z.object({
   type: z.string(),
   text: z.string()