This commit is contained in:
Saeed Vaziry
2025-05-23 18:27:24 +02:00
parent a5ce0d33b3
commit ff11fb44e0
36 changed files with 1001 additions and 326 deletions

View File

@ -14,11 +14,10 @@ import {
} from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/react';
import { BookOpen, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CogIcon, Folder, MinusIcon, PlusIcon, ServerIcon } from 'lucide-react';
import { BookOpen, ChevronRightIcon, CogIcon, Folder, ServerIcon } from 'lucide-react';
import AppLogo from './app-logo';
import { Icon } from '@/components/icon';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { useState } from 'react';
const mainNavItems: NavItem[] = [
{
@ -47,8 +46,6 @@ const footerNavItems: NavItem[] = [
];
export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?: NavItem[]; secondNavTitle?: string }) {
const [open, setOpen] = useState<NavItem>();
return (
<Sidebar collapsible="icon" className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row">
{/* This is the first sidebar */}
@ -124,12 +121,7 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
if (item.children && item.children.length > 0) {
return (
<Collapsible
key={`${item.title}-${item.href}`}
defaultOpen={isActive}
onOpenChange={(value) => (value ? setOpen(item) : setOpen(undefined))}
className="group/collapsible"
>
<Collapsible key={`${item.title}-${item.href}`} defaultOpen={isActive} className="group/collapsible">
<SidebarMenuItem>
<CollapsibleTrigger asChild>
<SidebarMenuButton>

View File

@ -1,5 +1,5 @@
import { type SharedData } from '@/types';
import { Link, useForm, usePage } from '@inertiajs/react';
import { useForm, usePage } from '@inertiajs/react';
import { useState } from 'react';
import {
DropdownMenu,
@ -32,17 +32,13 @@ export function ProjectSwitch() {
return (
<div className="flex items-center">
<Link href={route('servers')}>
<Button variant="ghost" className="px-2">
<Avatar className="size-6 rounded-sm">
<AvatarFallback className="rounded-sm">{initials(auth.currentProject?.name ?? '')}</AvatarFallback>
</Avatar>
<span className="hidden lg:flex">{auth.currentProject?.name}</span>
</Button>
</Link>
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="px-1!">
<Avatar className="size-6 rounded-sm">
<AvatarFallback className="rounded-sm">{initials(auth.currentProject?.name ?? '')}</AvatarFallback>
</Avatar>
<span className="hidden lg:flex">{auth.currentProject?.name}</span>
<ChevronsUpDownIcon size={5} />
</Button>
</DropdownMenuTrigger>

View File

@ -1,4 +1,4 @@
import { Link, useForm, usePage } from '@inertiajs/react';
import { useForm, usePage } from '@inertiajs/react';
import { useState } from 'react';
import {
DropdownMenu,
@ -29,29 +29,27 @@ export function ServerSwitch() {
return (
<div className="flex items-center">
{selectedServer && (
<Link href={route('servers.show', { server: selectedServer?.id || '' })}>
<Button variant="ghost" className="px-2">
<Avatar className="size-6 rounded-sm">
<AvatarFallback className="rounded-sm">{initials(selectedServer?.name ?? '')}</AvatarFallback>
</Avatar>
<span className="hidden lg:flex">{selectedServer?.name}</span>
</Button>
</Link>
)}
{!selectedServer && (
<Button variant="ghost" className="cursor-default px-2">
<Avatar className="size-6 rounded-sm">
<AvatarFallback className="rounded-sm">S</AvatarFallback>
</Avatar>
<span className="hidden lg:flex">Select a server</span>
</Button>
)}
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="px-1!">
{selectedServer && (
<>
<Avatar className="size-6 rounded-sm">
<AvatarFallback className="rounded-sm">{initials(selectedServer?.name ?? '')}</AvatarFallback>
</Avatar>
<span className="hidden lg:flex">{selectedServer?.name}</span>
</>
)}
{!selectedServer && (
<>
<Avatar className="size-6 rounded-sm">
<AvatarFallback className="rounded-sm">S</AvatarFallback>
</Avatar>
<span className="hidden lg:flex">Select a server</span>
</>
)}
<ChevronsUpDownIcon size={5} />
</Button>
</DropdownMenuTrigger>

View File

@ -0,0 +1,48 @@
import { Skeleton } from '@/components/ui/skeleton';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { cn } from '@/lib/utils';
export function TableSkeleton({ modal }: { modal?: boolean }) {
const extraClasses = modal && 'border-none shadow-none';
return (
<div className={cn('rounded-md border shadow-xs', extraClasses)}>
<Table>
<TableHeader>
<TableRow>
<TableHead>
<Skeleton className="h-3 w-[100px]" />
</TableHead>
<TableHead>
<Skeleton className="h-3 w-[100px]" />
</TableHead>
<TableHead>
<Skeleton className="h-3 w-[100px]" />
</TableHead>
<TableHead>
<Skeleton className="h-3 w-[100px]" />
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{[...Array(3)].map((_, i) => (
<TableRow key={i}>
<TableCell>
<Skeleton className="h-5 w-[100px]" />
</TableCell>
<TableCell>
<Skeleton className="h-5 w-[100px]" />
</TableCell>
<TableCell>
<Skeleton className="h-5 w-[100px]" />
</TableCell>
<TableCell>
<Skeleton className="h-5 w-[100px]" />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}