Reaching a finishing point!

src/components/default/footer/index.tsx

@@ -1,6 +1,6 @@
 'use server';
 
-const FooterTest = () => {
+const Footer = () => {
   return (
     <footer className='w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16'>
       <p>
@@ -17,4 +17,4 @@ const FooterTest = () => {
     </footer>
   );
 };
-export default FooterTest;
+export default Footer;

src/components/default/form-message.tsx

@@ -1,24 +0,0 @@
-export type Message =
-  | { success: string }
-  | { error: string }
-  | { message: string };
-
-export const FormMessage = ({ message }: { message: Message }) => {
-  return (
-    <div className='flex flex-col gap-2 w-full max-w-md text-sm'>
-      {'success' in message && (
-        <div className='text-foreground border-l-2 border-foreground px-4'>
-          {message.success}
-        </div>
-      )}
-      {'error' in message && (
-        <div className='text-destructive-foreground border-l-2 border-destructive-foreground px-4'>
-          {message.error}
-        </div>
-      )}
-      {'message' in message && (
-        <div className='text-foreground border-l-2 px-4'>{message.message}</div>
-      )}
-    </div>
-  );
-};

src/components/default/index.tsx

@@ -1,4 +1,2 @@
-import { FormMessage, type Message } from '@/components/default/form-message';
-import { SubmitButton } from '@/components/default/submit-button';
-
-export { FormMessage, type Message, SubmitButton };
+export { StatusMessage, type Message } from '@/components/default/status-message';
+export { SubmitButton } from '@/components/default/submit-button';

src/components/default/profile/ProfileForm.tsx

@@ -2,7 +2,6 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import {
-  Button,
   CardContent,
   Form,
   FormControl,
@@ -13,9 +12,9 @@ import {
   FormMessage,
   Input,
 } from '@/components/ui';
-import { Loader2 } from 'lucide-react';
 import { useEffect } from 'react';
 import { useAuth } from '@/components/context/auth';
+import { SubmitButton } from '@/components/default';
 
 const formSchema = z.object({
   full_name: z.string().min(5, {
@@ -90,16 +89,12 @@ export const ProfileForm = ({onSubmit}: ProfileFormProps) => {
           />
 
           <div className='flex justify-center'>
-            <Button type='submit' disabled={isLoading}>
-              {isLoading ? (
-                <>
-                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                  Saving...
-                </>
-              ) : (
-                'Save Changes'
-              )}
-            </Button>
+            <SubmitButton
+              disabled={isLoading}
+              pendingText='Saving...'
+            >
+              Save Changes
+            </SubmitButton>
           </div>
         </form>
       </Form>

src/components/default/profile/ResetPasswordForm.tsx

@@ -18,7 +18,7 @@ import {
 import { SubmitButton } from '@/components/default';
 import { useState } from 'react';
 import { type Result } from '@/lib/actions';
-import { FormMessage as Pw } from '@/components/default';
+import { StatusMessage } from '@/components/default';
 
 const formSchema = z
   .object({
@@ -85,65 +85,64 @@ export const ResetPasswordForm = ({
         </CardDescription>
       </CardHeader>
       <CardContent>
-
-      <Form {...form}>
-        <form 
-          onSubmit={form.handleSubmit(handleUpdatePassword)}
-          className='space-y-6'
-        >
-          <FormField
-            control={form.control}
-            name='password'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>New Password</FormLabel>
-                <FormControl>
-                  <Input type='password' {...field} />
-                </FormControl>
-                <FormDescription>
-                  Enter your new password. Must be at least 8 characters.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
+        <Form {...form}>
+          <form 
+            onSubmit={form.handleSubmit(handleUpdatePassword)}
+            className='space-y-6'
+          >
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>New Password</FormLabel>
+                  <FormControl>
+                    <Input type='password' {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Enter your new password. Must be at least 8 characters.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='confirmPassword'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Confirm Password</FormLabel>
+                  <FormControl>
+                    <Input type='password' {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Please re-enter your new password to confirm.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {statusMessage && (
+              <div 
+                className={`text-sm text-center ${
+                  statusMessage.includes('Error') || statusMessage.includes('failed') 
+                    ? 'text-destructive' 
+                    : 'text-green-600'
+                }`}
+              >
+                {statusMessage}
+              </div>
             )}
-          />
-          <FormField
-            control={form.control}
-            name='confirmPassword'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Confirm Password</FormLabel>
-                <FormControl>
-                  <Input type='password' {...field} />
-                </FormControl>
-                <FormDescription>
-                  Please re-enter your new password to confirm.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          {statusMessage && (
-            <div 
-              className={`text-sm text-center ${
-                statusMessage.includes('Error') || statusMessage.includes('failed') 
-                  ? 'text-destructive' 
-                  : 'text-green-600'
-              }`}
-            >
-              {statusMessage}
+            <div className='flex justify-center'>
+              <SubmitButton
+                disabled={isLoading}
+                pendingText='Updating Password...'
+              >
+                Update Password
+              </SubmitButton>
             </div>
-          )}
-          <div className='flex justify-center'>
-            <SubmitButton
-              disabled={isLoading}
-              pendingText='Updating Password...'
-            >
-              Update Password
-            </SubmitButton>
-          </div>
-        </form>
-      </Form>
+          </form>
+        </Form>
       </CardContent>
     </div>
   );

src/components/default/profile/SignOut.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { CardContent, CardHeader, CardTitle } from '@/components/ui';
+import { SubmitButton } from '@/components/default';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/components/context/auth';
+import { signOut } from '@/lib/actions';
+
+export const SignOut = () => {
+  const { isLoading, refreshUserData } = useAuth();
+  const router = useRouter();
+
+  const handleSignOut = async () => {
+    const result = await signOut();
+    if (result?.success) {
+      await refreshUserData();
+      router.push('/sign-in');
+    }
+  };
+  return (
+    <div className='flex justify-center'>
+      <CardHeader className='md:w-5/6 w-full'>
+        <SubmitButton
+          disabled={isLoading}
+          onClick={handleSignOut}
+        >
+          Sign Out
+        </SubmitButton>
+      </CardHeader>
+    </div>
+  );
+};

src/components/default/profile/index.tsx

@@ -1,3 +1,4 @@
 export * from './AvatarUpload';
 export * from './ProfileForm';
 export * from './ResetPasswordForm';
+export * from './SignOut';

src/components/default/status-message.tsx

@@ -0,0 +1,27 @@
+export type Message =
+  | { success: string }
+  | { error: string }
+  | { message: string };
+
+export const StatusMessage = ({ message }: { message: Message }) => {
+  return (
+    <div
+      className='flex flex-col gap-2 w-full max-w-md
+        text-sm bg-accent rounded-md p-2 px-4'
+    >
+      {'success' in message && (
+        <div className='dark:text-green-500 text-green-700'>
+          {message.success}
+        </div>
+      )}
+      {'error' in message && (
+        <div className='text-destructive'>
+          {message.error}
+        </div>
+      )}
+      {'message' in message && (
+        <div className='text-foreground'>{message.message}</div>
+      )}
+    </div>
+  );
+};

src/components/default/submit-button.tsx

@@ -19,7 +19,13 @@ export const SubmitButton = ({
   const { pending } = useFormStatus();
 
   return (
-    <Button type='submit' aria-disabled={pending} disabled={disabled} {...props}>
+    <Button
+      className='cursor-pointer'
+      type='submit'
+      aria-disabled={pending}
+      disabled={disabled}
+      {...props}
+    >
       {pending || disabled ? (
         <>
           <Loader2 className='mr-2 h-4 w-4 animate-spin' />