54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { cn } from "@minmon/ui/lib/utils";
|
|
import * as React from "react";
|
|
|
|
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
|
return <table className={cn("w-full caption-bottom text-xs", className)} {...props} />;
|
|
}
|
|
|
|
function TableWrapper({ className, ...props }: React.ComponentProps<"div">) {
|
|
return <div className={cn("overflow-x-auto border", className)} {...props} />;
|
|
}
|
|
|
|
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
|
return <thead className={cn("bg-muted/40", className)} {...props} />;
|
|
}
|
|
|
|
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
|
return <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
|
|
}
|
|
|
|
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
|
return <tr className={cn("border-b transition-colors hover:bg-muted/30", className)} {...props} />;
|
|
}
|
|
|
|
function TableHead({ className, scope = "col", ...props }: React.ComponentProps<"th">) {
|
|
return (
|
|
<th
|
|
scope={scope}
|
|
className={cn(
|
|
"h-10 px-3 text-left align-middle text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground",
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
|
return <td className={cn("px-3 py-2.5 align-middle", className)} {...props} />;
|
|
}
|
|
|
|
function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
|
|
return <caption className={cn("mt-3 text-xs text-muted-foreground", className)} {...props} />;
|
|
}
|
|
|
|
export {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
TableWrapper,
|
|
};
|