update

packages/ui/src/components/nav-user.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+import {
+  CirclePlayIcon,
+  DollarSignIcon,
+  GraduationCapIcon,
+  LayoutDashboardIcon,
+  LightbulbIcon,
+  LogOutIcon,
+  UserIcon,
+  type LucideIcon
+} from 'lucide-react'
+import { Link } from 'react-router'
+
+import { initials } from '../lib/utils'
+import { Avatar, AvatarFallback } from './ui/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from './ui/dropdown-menu'
+
+type NavItem = {
+  title: string
+  url: string
+  icon: LucideIcon
+  scope?: string[]
+}
+
+const apps: NavItem[] = [
+  {
+    title: 'Sala de aula',
+    url: '//scorm.eduseg.workers.dev',
+    icon: GraduationCapIcon
+  },
+  {
+    title: 'Administrador',
+    url: '//admin.saladeaula.digital',
+    icon: LayoutDashboardIcon,
+    scope: ['apps:admin']
+  },
+  {
+    title: 'EDUSEG® Estúdio',
+    url: '//studio.saladeaula.digital',
+    icon: CirclePlayIcon,
+    scope: ['apps:studio']
+  },
+  {
+    title: 'EDUSEG® Insights',
+    url: '//insights.saladeaula.digital',
+    icon: LightbulbIcon,
+    scope: ['apps:insights']
+  }
+]
+
+export function NavUser({
+  user
+}: {
+  user: {
+    name: string
+    email: string
+    scope: string
+  }
+}) {
+  const userScope = user.scope.split(' ')
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="cursor-pointer" asChild>
+        <Avatar className="size-10">
+          <AvatarFallback>{initials(user.name)}</AvatarFallback>
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+        side="bottom"
+        align="end"
+        sideOffset={4}
+      >
+        <DropdownMenuLabel className="p-0 font-normal">
+          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+            <Avatar className="size-10">
+              <AvatarFallback>{initials(user.name)}</AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-medium">{user.name}</span>
+              <span className="truncate text-xs text-muted-foreground">
+                {user.email}
+              </span>
+            </div>
+          </div>
+        </DropdownMenuLabel>
+
+        <DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem asChild>
+            <Link
+              to="//scorm.eduseg.workers.dev/settings"
+              className="cursor-pointer"
+            >
+              <UserIcon />
+              Minha conta
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link
+              to="//scorm.eduseg.workers.dev/payments"
+              className="cursor-pointer"
+            >
+              <DollarSignIcon />
+              Histórico de compras
+            </Link>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+
+        <DropdownMenuGroup>
+          {grantIfHas(
+            ['apps:admin', 'apps:studio', 'apps:insights'],
+            userScope,
+            'any'
+          ) && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel className="text-muted-foreground text-sm">
+                Aplicações
+              </DropdownMenuLabel>
+            </>
+          )}
+
+          {apps.map(({ title, url, scope = [], icon: Icon }, idx) => {
+            if (grantIfHas(scope, userScope)) {
+              return (
+                <DropdownMenuItem key={idx} asChild>
+                  <Link to={url} className="cursor-pointer">
+                    <Icon /> {title}
+                  </Link>
+                </DropdownMenuItem>
+              )
+            }
+
+            return <></>
+          })}
+        </DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link to="/logout" className="cursor-pointer" reloadDocument>
+            <LogOutIcon />
+            Sair
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function grantIfHas(
+  required: string[],
+  granted: string[],
+  mode: 'all' | 'any' = 'all'
+): boolean {
+  const grantedSet: Set<string> = new Set(granted)
+
+  if (mode === 'all') {
+    return required.every((scope) => grantedSet.has(scope))
+  }
+
+  return required.some((scope) => grantedSet.has(scope))
+}