Cleanup

2024-03-24 02:23:22 +08:00
parent 648d77b430
commit bce3479368
589 changed files with 37067 additions and 9596 deletions
--- a/packages/features/accounts/src/components/personal-account-dropdown.tsx
+++ b/packages/features/accounts/src/components/personal-account-dropdown.tsx
@@ -0,0 +1,175 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import Link from 'next/link';
+
+import type { Session } from '@supabase/gotrue-js';
+
+import {
+  EllipsisVerticalIcon,
+  HomeIcon,
+  LogOutIcon,
+  MessageCircleQuestionIcon,
+  ShieldIcon,
+} from 'lucide-react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@kit/ui/dropdown-menu';
+import { If } from '@kit/ui/if';
+import { ProfileAvatar } from '@kit/ui/profile-avatar';
+import { Trans } from '@kit/ui/trans';
+import { cn } from '@kit/ui/utils';
+
+import { usePersonalAccountData } from '../hooks/use-personal-account-data';
+
+export function PersonalAccountDropdown({
+  className,
+  session,
+  signOutRequested,
+  showProfileName,
+  paths,
+}: {
+  className?: string;
+  session: Session | undefined;
+  signOutRequested: () => unknown;
+  showProfileName?: boolean;
+  paths: {
+    home: string;
+  };
+}) {
+  const { data: personalAccountData } = usePersonalAccountData();
+  const authUser = session?.user;
+
+  const signedInAsLabel = useMemo(() => {
+    const email = authUser?.email ?? undefined;
+    const phone = authUser?.phone ?? undefined;
+
+    return email ?? phone;
+  }, [authUser?.email, authUser?.phone]);
+
+  const displayName = personalAccountData?.name ?? authUser?.email ?? '';
+
+  const isSuperAdmin = useMemo(() => {
+    return authUser?.app_metadata.role === 'super-admin';
+  }, [authUser]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        aria-label="Open your profile menu"
+        data-test={'profile-dropdown-trigger'}
+        className={cn(
+          'animate-in fade-in group flex cursor-pointer items-center focus:outline-none',
+          className ?? '',
+          {
+            ['items-center space-x-2.5 rounded-lg border' +
+            ' hover:bg-muted p-2 transition-colors']: showProfileName,
+          },
+        )}
+      >
+        <ProfileAvatar
+          displayName={displayName ?? authUser?.email ?? ''}
+          pictureUrl={personalAccountData?.picture_url}
+        />
+
+        <If condition={showProfileName}>
+          <div className={'flex w-full flex-col truncate text-left'}>
+            <span className={'truncate text-sm'}>{displayName}</span>
+
+            <span className={'text-muted-foreground truncate text-xs'}>
+              {signedInAsLabel}
+            </span>
+          </div>
+
+          <EllipsisVerticalIcon
+            className={'text-muted-foreground hidden h-8 group-hover:flex'}
+          />
+        </If>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        className={'!min-w-[15rem]'}
+        collisionPadding={{ right: 20, left: 20 }}
+        sideOffset={20}
+      >
+        <DropdownMenuItem className={'!h-10 rounded-none'}>
+          <div
+            className={'flex flex-col justify-start truncate text-left text-xs'}
+          >
+            <div className={'text-gray-500'}>
+              <Trans i18nKey={'common:signedInAs'} />
+            </div>
+
+            <div>
+              <span className={'block truncate'}>{signedInAsLabel}</span>
+            </div>
+          </div>
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem asChild>
+          <Link
+            className={'s-full flex items-center space-x-2'}
+            href={paths.home}
+          >
+            <HomeIcon className={'h-5'} />
+
+            <span>
+              <Trans i18nKey={'common:homeTabLabel'} />
+            </span>
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem asChild>
+          <Link className={'s-full flex items-center space-x-2'} href={'/docs'}>
+            <MessageCircleQuestionIcon className={'h-5'} />
+
+            <span>
+              <Trans i18nKey={'common:documentation'} />
+            </span>
+          </Link>
+        </DropdownMenuItem>
+
+        <If condition={isSuperAdmin}>
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem asChild>
+            <Link
+              className={'s-full flex items-center space-x-2'}
+              href={'/admin'}
+            >
+              <ShieldIcon className={'h-5'} />
+
+              <span>Admin</span>
+            </Link>
+          </DropdownMenuItem>
+        </If>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          role={'button'}
+          className={'cursor-pointer'}
+          onClick={signOutRequested}
+        >
+          <span className={'flex w-full items-center space-x-2'}>
+            <LogOutIcon className={'h-5'} />
+
+            <span>
+              <Trans i18nKey={'auth:signOut'} />
+            </span>
+          </span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}