63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
|
|
|
|
interface TableProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function Table({ children, className }: TableProps) {
|
|
return (
|
|
<div className="overflow-x-auto rounded-xl border border-gray-200 bg-white">
|
|
<table className={cn("w-full text-sm", className)}>
|
|
{children}
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function TableHead({ children }: TableProps) {
|
|
return <thead className="bg-gray-50 text-xs uppercase text-gray-500">{children}</thead>;
|
|
}
|
|
|
|
export function TableBody({ children }: TableProps) {
|
|
return <tbody className="divide-y divide-gray-100">{children}</tbody>;
|
|
}
|
|
|
|
export function TableRow({
|
|
children, className, onClick, ...rest
|
|
}: TableProps & { onClick?: () => void } & HTMLAttributes<HTMLTableRowElement>) {
|
|
return (
|
|
<tr
|
|
className={cn("transition-colors", onClick && "cursor-pointer hover:bg-blue-50", className)}
|
|
onClick={onClick}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
export function Th({ children, className, ...rest }: TableProps & ThHTMLAttributes<HTMLTableCellElement>) {
|
|
return <th className={cn("px-4 py-3 text-left font-medium", className)} {...rest}>{children}</th>;
|
|
}
|
|
|
|
export function Td({ children, className, ...rest }: TableProps & TdHTMLAttributes<HTMLTableCellElement>) {
|
|
return <td className={cn("px-4 py-3 text-gray-700", className)} {...rest}>{children}</td>;
|
|
}
|
|
|
|
export function EmptyState({ message = "No data yet" }: { message?: string }) {
|
|
return (
|
|
<tr>
|
|
<td colSpan={100} className="py-12 text-center text-gray-400">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<svg className="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
|
</svg>
|
|
<span className="text-sm">{message}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|