5d57b131ff
Rename HomeController, Home page, and V5HomeProps type to Dashboard equivalents. Update route name from 'home' to 'dashboard'. Add coollabs brand color tokens to CSS theme and a 'coolify' button variant using those colors. Add Sheet UI component for slide-over panels. Update navbar with active-route detection and Sheet-based mobile drawer. Switch cluster action buttons to use the new 'coolify' variant.
87 lines
4.3 KiB
TypeScript
87 lines
4.3 KiB
TypeScript
import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
|
|
import { XIcon } from '@phosphor-icons/react';
|
|
import type * as React from 'react';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
function Sheet({ ...props }: SheetPrimitive.Root.Props) {
|
|
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
|
}
|
|
|
|
function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
|
|
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
|
|
}
|
|
|
|
function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
|
|
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
|
|
}
|
|
|
|
function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
|
|
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
|
}
|
|
|
|
function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
|
|
return (
|
|
<SheetPrimitive.Backdrop
|
|
data-slot="sheet-overlay"
|
|
className={cn(
|
|
'fixed inset-0 z-50 bg-black/10 text-xs/relaxed transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function SheetContent({
|
|
className,
|
|
children,
|
|
side = 'right',
|
|
showCloseButton = true,
|
|
...props
|
|
}: SheetPrimitive.Popup.Props & {
|
|
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
showCloseButton?: boolean;
|
|
}) {
|
|
return (
|
|
<SheetPortal>
|
|
<SheetOverlay />
|
|
<SheetPrimitive.Popup
|
|
data-slot="sheet-content"
|
|
data-side={side}
|
|
className={cn(
|
|
'fixed z-50 flex flex-col bg-popover bg-clip-padding text-xs/relaxed text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
{showCloseButton && (
|
|
<SheetPrimitive.Close data-slot="sheet-close" render={<Button variant="ghost" className="absolute top-3 right-3" size="icon-sm" />}>
|
|
<XIcon />
|
|
<span className="sr-only">Close</span>
|
|
</SheetPrimitive.Close>
|
|
)}
|
|
</SheetPrimitive.Popup>
|
|
</SheetPortal>
|
|
);
|
|
}
|
|
|
|
function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return <div data-slot="sheet-header" className={cn('flex flex-col gap-0.5 p-4', className)} {...props} />;
|
|
}
|
|
|
|
function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return <div data-slot="sheet-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;
|
|
}
|
|
|
|
function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
|
|
return <SheetPrimitive.Title data-slot="sheet-title" className={cn('font-heading text-sm font-medium text-foreground', className)} {...props} />;
|
|
}
|
|
|
|
function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {
|
|
return <SheetPrimitive.Description data-slot="sheet-description" className={cn('text-xs/relaxed text-muted-foreground', className)} {...props} />;
|
|
}
|
|
|
|
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
|