Navbar Actor selection (#242)

* WIP actor in Navbar * Linting * Finish first implementation of actor selection * Fixup
theopensource-company · Dec 27, 2023 · 9fc12cb · 9fc12cb
1 parent 3c84274
commit 9fc12cb
Show file tree

Hide file tree

Showing 5 changed files with 275 additions and 73 deletions.
diff --git a/src/app/[locale]/(console)/organisation/[organisation]/layout.tsx b/src/app/[locale]/(console)/organisation/[organisation]/layout.tsx
@@ -44,7 +44,7 @@ export default function ConsoleLayout({ children }: { children: ReactNode }) {
 
     return (
         <>
-            <Navbar>
+            <Navbar actor={organisation ?? undefined}>
                 <NavbarSubLinks baseUrl={`/organisation/${slug}`}>
                     <NavbarSubLink>
                         <ArrowLeft />

diff --git a/src/components/cards/avatar.tsx b/src/components/cards/avatar.tsx
@@ -1,7 +1,8 @@
 import { cn } from '@/lib/utils';
 import { Profile, unknownProfile } from '@/schema/resources/profile';
+import { Building, Users } from 'lucide-react';
 import Image from 'next/image';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
     AvatarFallback,
     AvatarImage,
@@ -24,20 +25,49 @@ export function Avatar({
 }: {
     profile?: Profile | null;
     loading?: boolean;
-    size?: 'tiny' | 'small' | 'normal' | 'big' | 'huge';
+    size?: 'extra-tiny' | 'tiny' | 'small' | 'normal' | 'big' | 'huge';
     renderBadge?: boolean;
     className?: string;
 }) {
     profile = profile ?? unknownProfile;
     const avatarFallback = avatarFallbackByName(profile.name);
     const avatarSize = {
+        'extra-tiny': 'h-6 w-6 text-xs',
         tiny: 'h-8 w-8 text-md',
         small: 'h-10 w-10 text-lg',
         normal: 'h-12 w-12 text-xl',
         big: 'h-14 w-14 text-2xl',
         huge: 'h-20 w-20 text-4xl',
     }[size ?? 'normal'];
 
+    function Badge({ icon, text }: { icon: ReactNode; text: string }) {
+        return (
+            <TooltipProvider>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <div
+                            className={cn(
+                                'absolute -bottom-1 -right-1 aspect-square rounded-full bg-background transition-colors group-hover:bg-accent',
+                                ['big', 'huge'].includes(size as string)
+                                    ? 'w-[45%] p-1.5'
+                                    : size == 'extra-tiny'
+                                    ? 'w-2/3 p-1'
+                                    : size == 'tiny'
+                                    ? 'w-3/5 p-1'
+                                    : 'w-1/2 p-1'
+                            )}
+                        >
+                            {icon}
+                        </div>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <p>{text}</p>
+                    </TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
+        );
+    }
+
     return loading ? (
         <Skeleton
             className={cn(
@@ -66,33 +96,32 @@ export function Avatar({
                     {avatarFallback}
                 </AvatarFallback>
             </RenderAvatar>
-            {renderBadge && 'type' in profile && profile.type == 'admin' && (
-                <TooltipProvider>
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <div
-                                className={cn(
-                                    'absolute -bottom-1 -right-1 aspect-square rounded-full bg-background transition-colors group-hover:bg-accent',
-                                    ['big', 'huge'].includes(size as string)
-                                        ? 'w-[45%] p-1.5'
-                                        : 'w-1/2 p-1'
-                                )}
-                            >
-                                <Image
-                                    src="/favicon.ico"
-                                    alt="Playrbase Logo"
-                                    width="50"
-                                    height="50"
-                                    className="h-full w-full text-white"
-                                />
-                            </div>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                            <p>Platform admin</p>
-                        </TooltipContent>
-                    </Tooltip>
-                </TooltipProvider>
-            )}
+            {renderBadge && 'type' in profile ? (
+                profile.type == 'admin' ? (
+                    <Badge
+                        text="Platform admin"
+                        icon={
+                            <Image
+                                src="/favicon.ico"
+                                alt="Playrbase Logo"
+                                width="50"
+                                height="50"
+                                className="h-full w-full text-white"
+                            />
+                        }
+                    />
+                ) : profile.type == 'organisation' ? (
+                    <Badge
+                        text="Organisation"
+                        icon={<Building className="h-full w-full" />}
+                    />
+                ) : profile.type == 'team' ? (
+                    <Badge
+                        text="Team"
+                        icon={<Users className="h-full w-full" />}
+                    />
+                ) : undefined
+            ) : undefined}
         </div>
     );
 }

diff --git a/src/components/cards/profile.tsx b/src/components/cards/profile.tsx
@@ -16,7 +16,7 @@ export function Profile({
 }: {
     profile?: TProfile | null;
     loading?: boolean;
-    size?: 'tiny' | 'small' | 'normal' | 'big';
+    size?: 'extra-tiny' | 'tiny' | 'small' | 'normal' | 'big';
     noSub?: boolean;
     customSub?: ReactNode | string;
 }) {
@@ -27,20 +27,43 @@ export function Profile({
         <div
             className={cn(
                 'flex items-center',
-                size == 'tiny' ? 'space-x-3' : 'space-x-4'
+                size == 'tiny' || size == 'extra-tiny'
+                    ? 'space-x-3'
+                    : 'space-x-4'
             )}
         >
             <Avatar profile={profile} loading={loading} size={size} />
             {loading ? (
-                <div className="min-w-[150px] space-y-2 pr-4">
-                    <Skeleton className="h-4 w-full" />
-                    <Skeleton className="h-4 w-[80%]" />
+                <div
+                    className={cn(
+                        'min-w-[100px] space-y-2',
+                        size == 'tiny' || size == 'extra-tiny' ? 'pr-3' : 'pr-4'
+                    )}
+                >
+                    {size == 'tiny' || size == 'extra-tiny' ? (
+                        <>
+                            <Skeleton
+                                className={cn('w-full', noSub ? 'h-4' : 'h-3')}
+                            />
+                            {!noSub && <Skeleton className="h-2 w-[80%]" />}
+                        </>
+                    ) : (
+                        <>
+                            <Skeleton className="h-4 w-full" />
+                            {!noSub && <Skeleton className="h-3 w-[80%]" />}
+                        </>
+                    )}
                 </div>
             ) : (
-                <div className="min-w-[150px] pr-4">
+                <div
+                    className={cn(
+                        size == 'tiny' || size == 'extra-tiny' ? 'pr-3' : 'pr-4'
+                    )}
+                >
                     <h2
                         className={cn(
                             'text-foreground',
+                            size == 'extra-tiny' && 'text-sm',
                             noSub ? 'font-semibold' : 'font-bold'
                         )}
                     >