wx44wx/AI-VideoAssistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve web ui

Browse Source
This commit is contained in:
Xin Wang
2026-02-07 14:28:54 +08:00
parent dc3130d387
commit 2725d2fe20
10 changed files with 232 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/components/UI.tsx
View File

@@ -53,14 +53,23 @@ export const Input: React.FC<InputProps> = ({ 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}`}>
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
export const Badge: React.FC<{ children: React.ReactNode; variant?: 'default' | 'success' | 'warning' | 'outline' }> = ({ children, variant = 'default' }) => {
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",
@@ -68,7 +77,7 @@ export const Badge: React.FC<{ children: React.ReactNode; variant?: 'default' |
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]}`}>
<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>
);
@@ -76,9 +85,24 @@ export const Badge: React.FC<{ children: React.ReactNode; variant?: 'default' |
// 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>;
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>;
// Drawer (Side Sheet)
interface DrawerProps {