feat: initial commit

src/ui/components/internal/user-profile/popover/user-manage.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { montserrat } from '@/app/fonts';
+import { Separator } from '@/ui/components/shadcn/separator';
+import { useClerk } from '@clerk/nextjs';
+import { useQueryClient } from '@tanstack/react-query';
+
+export type UserProfileButtonProps = {
+    username: string;
+};
+
+export function UserManagmentPopover({ username }: UserProfileButtonProps) {
+    const queryClient = useQueryClient();
+
+    const { signOut } = useClerk();
+
+    const onSignOutUser = () => {
+        signOut({ redirectUrl: '/api/user/unload' }).then(() => {
+            queryClient.invalidateQueries({ queryKey: ['sessionData'] });
+            console.log(`Signing out user: ${username}`);
+        });
+    };
+
+    return (
+        <>
+            <div className='space-y-4'>
+                <p className='text-sm font-medium leading-none'>{username}</p>
+                <Separator />
+                <button
+                    className='flex h-[24px] w-full cursor-pointer items-center justify-start'
+                    onClick={onSignOutUser}
+                >
+                    <p
+                        className={`text-sm font-medium leading-none ${montserrat.className}`}
+                    >
+                        Sign out
+                    </p>
+                </button>
+            </div>
+        </>
+    );
+}