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>Form {JSON.stringify(customerForm)}</div>
-      <Button onClick={handleDelete}>Delete</Button>
-    </>
+    <div className='mx-auto my-4 max-w-md'>
+      <div className='mb-2'>
+        <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 (
-    <>
-      <h1>Forms</h1>
-      {customerForms &&
-        customerForms.map(customerForm => (
-          <div
-            onClick={() => redirectToCustomerForm(customerForm.id)}
-            key={customerForm.id}
+    <div className='mx-auto max-w-md'>
+      <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}
+              >
+                <p className='font-semibold'>{customerForm.text}</p>
+                <p className='text-sm text-gray-600'>
+                  Type: {customerForm.type}
+                </p>
+              </div>
+            ))}
+        </div>
+      </div>
+
+      <div className='my-8'>
+        <h1 className='mb-4 text-2xl font-bold'>New form</h1>
+        <FormProvider {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className='space-y-4'
           >
-            {customerForm.text}
-            of type {customerForm.type}
-          </div>
-        ))}
-      <h1>New form</h1>
-      <FormProvider {...form}>
-        <form onSubmit={form.handleSubmit(handleSubmit)}>
-          <FormField
-            control={form.control}
-            name='text'
-            render={({ field }) => (
-              <FormItem>
-                <FormMessage />
-                <FormControl>
-                  <Input placeholder='name' {...field} />
-                </FormControl>
-              </FormItem>
-            )}
-          />
-          <Button type='submit'>Create</Button>
-        </form>
-      </FormProvider>
-    </>
+            <FormField
+              control={form.control}
+              name='text'
+              render={({ field }) => (
+                <FormItem className='flex flex-col'>
+                  <FormMessage />
+                  <FormControl>
+                    <Input
+                      placeholder='Name'
+                      {...field}
+                      className='rounded-lg border p-2'
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <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'>
-      <h1 className='text-center text-4xl font-bold'>
+    <main className='flex min-h-screen flex-col items-center justify-center p-24'>
+      <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()