siakad-itm/resources/js/components/nav-user.tsx
Yoga Pangestu fbf29ad4e9
Some checks failed
tests / ci (pull_request) Has been cancelled
feat: Refactor UI components and add new Drawer, Table, and Tabs components
- Removed unnecessary "use client" directive from checkbox and select components.
- Added new Drawer component with associated subcomponents (DrawerTrigger, DrawerClose, etc.) for better UI management.
- Introduced Table component with TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption for structured data display.
- Added Tabs component with TabsList, TabsTrigger, and TabsContent for tabbed navigation.
- Updated user-info component to use full_name instead of name for better clarity.
- Modified user-menu-content to include translations for settings and logout options.
- Added data.json file for mock data in the dashboard.
- Updated dashboard page to utilize new components and improved layout.
- Refactored User type to replace name with full_name for consistency across the application.
2026-08-03 15:57:38 +07:00

49 lines
1.9 KiB
TypeScript

import { usePage } from '@inertiajs/react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { UserMenuContent } from '@/components/user-menu-content';
import { useInitials } from '@/hooks/use-initials';
import type { User } from '@/types';
export function NavUser() {
const page = usePage();
const { auth } = page.props;
const getInitials = useInitials();
const user = auth.user as User | undefined;
if (!user) return null;
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="flex items-center gap-2 rounded-md p-1.5 text-left text-sm transition-colors hover:bg-sidebar-accent data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
<Avatar className="h-8 w-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.full_name} />
<AvatarFallback className="rounded-lg">
{getInitials(user.full_name ?? '')}
</AvatarFallback>
</Avatar>
<div className="hidden grid flex-1 text-left text-sm leading-tight md:grid">
<span className="truncate font-medium">{user.full_name}</span>
<span className="truncate text-xs text-muted-foreground">
{user.email}
</span>
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-56 rounded-lg"
align="end"
sideOffset={4}
>
<UserMenuContent user={user} />
</DropdownMenuContent>
</DropdownMenu>
);
}