276 lines
10 KiB
TypeScript
276 lines
10 KiB
TypeScript
|
|
import React from 'react';
|
|
import { X } from 'lucide-react';
|
|
|
|
// Button
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
|
|
size?: 'sm' | 'md' | 'lg' | 'icon';
|
|
}
|
|
|
|
export const Button: React.FC<ButtonProps> = ({
|
|
className = '',
|
|
variant = 'primary',
|
|
size = 'md',
|
|
children,
|
|
...props
|
|
}) => {
|
|
const baseStyles = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 active:scale-95";
|
|
|
|
const variants = {
|
|
// Primary: Glow effect
|
|
primary: "bg-primary text-primary-foreground shadow-[0_0_10px_rgba(6,182,212,0.5)] hover:bg-primary/90 hover:shadow-[0_0_15px_rgba(6,182,212,0.6)]",
|
|
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
|
outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-primary/50",
|
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
|
};
|
|
|
|
const sizes = {
|
|
sm: "h-8 px-3 text-xs",
|
|
md: "h-9 px-4 py-2",
|
|
lg: "h-10 px-8",
|
|
icon: "h-9 w-9",
|
|
};
|
|
|
|
return (
|
|
<button className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`} {...props}>
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
// Input - Removed border, added subtle background
|
|
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
|
|
|
|
export const Input: React.FC<InputProps> = ({ className = '', ...props }) => {
|
|
return (
|
|
<input
|
|
className={`flex h-9 w-full rounded-md bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 focus-visible:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|
|
|
|
interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
|
|
|
|
export const Select: React.FC<SelectProps> = ({ className = '', children, ...props }) => {
|
|
return (
|
|
<select
|
|
className={`flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</select>
|
|
);
|
|
};
|
|
|
|
interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
checked: boolean;
|
|
onCheckedChange: (checked: boolean) => void;
|
|
}
|
|
|
|
export const Switch: React.FC<SwitchProps> = ({
|
|
checked,
|
|
onCheckedChange,
|
|
className = '',
|
|
disabled,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={checked}
|
|
disabled={disabled}
|
|
onClick={() => {
|
|
if (!disabled) onCheckedChange(!checked);
|
|
}}
|
|
className={`relative h-6 w-11 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 ${checked ? 'bg-emerald-500/80' : 'bg-white/20'} ${className}`}
|
|
{...props}
|
|
>
|
|
<span
|
|
className={`absolute left-0.5 top-1/2 h-5 w-5 -translate-y-1/2 rounded-full bg-white shadow transition-transform ${checked ? 'translate-x-5' : 'translate-x-0'}`}
|
|
/>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
// Card - Glassmorphism style, very subtle border
|
|
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
export const Card: React.FC<CardProps> = ({ children, className = '', ...props }) => (
|
|
<div className={`rounded-xl border border-white/5 bg-card/40 backdrop-blur-md text-card-foreground shadow-sm ${className}`} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
// Badge
|
|
interface BadgeProps {
|
|
children: React.ReactNode;
|
|
variant?: 'default' | 'success' | 'warning' | 'outline';
|
|
className?: string;
|
|
}
|
|
export const Badge: React.FC<BadgeProps> = ({ children, variant = 'default', className = '' }) => {
|
|
const styles = {
|
|
default: "border-transparent bg-primary/20 text-primary hover:bg-primary/30 border border-primary/20",
|
|
success: "border-transparent bg-green-500/20 text-green-400 border border-green-500/20",
|
|
warning: "border-transparent bg-yellow-500/20 text-yellow-400 border border-yellow-500/20",
|
|
outline: "text-foreground border border-white/10 hover:bg-accent hover:text-accent-foreground",
|
|
};
|
|
return (
|
|
<div className={`inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${styles[variant]} ${className}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Table - Subtle borders
|
|
export const TableHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => <thead className="[&_tr]:border-b [&_tr]:border-white/5">{children}</thead>;
|
|
|
|
interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
export const TableRow: React.FC<TableRowProps> = ({ children, className = '', ...props }) => <tr className={`border-b border-white/5 transition-colors hover:bg-white/5 data-[state=selected]:bg-muted ${className}`} {...props}>{children}</tr>;
|
|
|
|
interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
export const TableHead: React.FC<TableHeadProps> = ({ children, className = '', ...props }) => <th className={`h-10 px-4 text-left align-middle text-sm font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 ${className}`} {...props}>{children}</th>;
|
|
|
|
interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
export const TableCell: React.FC<TableCellProps> = ({ children, className = '', ...props }) => <td className={`p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0 ${className}`} {...props}>{children}</td>;
|
|
|
|
interface LibraryPageShellProps {
|
|
title: string;
|
|
primaryAction: React.ReactNode;
|
|
filterBar: React.ReactNode;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const LibraryPageShell: React.FC<LibraryPageShellProps> = ({ title, primaryAction, filterBar, children }) => {
|
|
return (
|
|
<div className="space-y-6 animate-in fade-in py-4 pb-10">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold tracking-tight text-white">{title}</h1>
|
|
{primaryAction}
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
|
|
{filterBar}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface TableStatusRowProps {
|
|
colSpan: number;
|
|
text: string;
|
|
}
|
|
|
|
export const TableStatusRow: React.FC<TableStatusRowProps> = ({ colSpan, text }) => {
|
|
return (
|
|
<TableRow>
|
|
<TableCell colSpan={colSpan} className="text-center py-8 text-muted-foreground">
|
|
{text}
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
};
|
|
|
|
interface LibraryActionCellProps {
|
|
previewAction?: React.ReactNode;
|
|
editAction: React.ReactNode;
|
|
deleteAction: React.ReactNode;
|
|
}
|
|
|
|
export const LibraryActionCell: React.FC<LibraryActionCellProps> = ({ previewAction, editAction, deleteAction }) => {
|
|
return (
|
|
<TableCell className="text-right">
|
|
{previewAction}
|
|
{editAction}
|
|
{deleteAction}
|
|
</TableCell>
|
|
);
|
|
};
|
|
|
|
// Drawer (Side Sheet)
|
|
interface DrawerProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, title, className, children }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex">
|
|
{/* Backdrop */}
|
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" onClick={onClose} />
|
|
|
|
{/* Drawer Content */}
|
|
<div className={`relative ml-auto flex h-full w-full flex-col overflow-y-auto bg-background/95 border-l border-white/10 p-6 shadow-2xl animate-in slide-in-from-right ${className || 'max-w-md sm:max-w-lg'}`}>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold text-foreground">{title}</h2>
|
|
<Button variant="ghost" size="icon" onClick={onClose}>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex-1">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Dialog (Modal)
|
|
interface DialogProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
contentClassName?: string;
|
|
}
|
|
|
|
export const Dialog: React.FC<DialogProps> = ({ isOpen, onClose, title, children, footer, contentClassName }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm transition-opacity animate-in fade-in" onClick={onClose} />
|
|
<div className={`relative z-50 w-full max-w-lg rounded-xl border border-white/10 bg-card p-6 shadow-2xl animate-in zoom-in-95 duration-200 ${contentClassName || ''}`}>
|
|
<div className="flex flex-col space-y-1.5 text-center sm:text-left mb-4">
|
|
<h2 className="text-lg font-semibold leading-none tracking-tight">{title}</h2>
|
|
</div>
|
|
<div className="py-4">
|
|
{children}
|
|
</div>
|
|
{footer && (
|
|
<div className="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 mt-2">
|
|
{footer}
|
|
</div>
|
|
)}
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
<span className="sr-only">Close</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|