Add web
This commit is contained in:
Xin Wang
152
web/components/UI.tsx
Normal file
152
web/components/UI.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// Card - Glassmorphism style, very subtle border
|
||||
export const Card: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => (
|
||||
<div className={`rounded-xl border border-white/5 bg-card/40 backdrop-blur-md text-card-foreground shadow-sm ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Badge
|
||||
export const Badge: React.FC<{ children: React.ReactNode; variant?: 'default' | 'success' | 'warning' | 'outline' }> = ({ children, variant = 'default' }) => {
|
||||
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]}`}>
|
||||
{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>;
|
||||
export const TableRow: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => <tr className={`border-b border-white/5 transition-colors hover:bg-white/5 data-[state=selected]:bg-muted ${className}`}>{children}</tr>;
|
||||
export const TableHead: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => <th className={`h-10 px-4 text-left align-middle text-sm font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 ${className}`}>{children}</th>;
|
||||
export const TableCell: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => <td className={`p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0 ${className}`}>{children}</td>;
|
||||
|
||||
// Drawer (Side Sheet)
|
||||
interface DrawerProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, title, 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 max-w-md flex-col overflow-y-auto bg-background/95 border-l border-white/10 p-6 shadow-2xl animate-in slide-in-from-right 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;
|
||||
}
|
||||
|
||||
export const Dialog: React.FC<DialogProps> = ({ isOpen, onClose, title, children, footer }) => {
|
||||
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">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user