More stuff

src/components/default/layout/header/avatar-dropdown.tsx

@@ -0,0 +1,76 @@
+'use client';
+import Link from 'next/link';
+import {
+  BasedAvatar,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui';
+import { useAuth } from '@/lib/hooks/context';
+import { useRouter } from 'next/navigation';
+import { signOut } from '@/lib/queries';
+import { useSupabaseClient } from '@/utils/supabase';
+
+export const AvatarDropdown = () => {
+  const { profile, avatar, refreshUser } = useAuth();
+  const router = useRouter();
+  const client = useSupabaseClient();
+
+  const handleSignOut = async () => {
+    try {
+      if (!client) throw new Error('Supabase client not found!');
+      const { error } = await signOut(client);
+      if (error) throw new Error(error.message);
+      await refreshUser();
+      router.push('/');
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <BasedAvatar
+          src={avatar}
+          fullName={profile?.full_name}
+          className='lg:h-12 lg:w-12 my-auto'
+          fallbackProps={{ className: 'text-xl font-semibold' }}
+          userIconProps={{ size: 32 }}
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        {(profile?.full_name ?? profile?.email) && (
+          <>
+            <DropdownMenuLabel className='font-bold'>
+              {profile.full_name?.trim() ?? profile.email?.trim()}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        <DropdownMenuItem asChild>
+          <Link
+            href='/profile'
+            className='w-full justify-center cursor-pointer'
+          >
+            Edit Profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator className='h-[2px]' />
+        <DropdownMenuItem asChild>
+          <Button
+            onClick={handleSignOut}
+            className='w-full justify-center cursor-pointer'
+            variant='ghost'
+          >
+            Sign Out
+          </Button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};