Seed: ecommerce template (24 files)

src/components/ui/table.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Table = ({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => (
+  <div className="relative w-full overflow-auto">
+    <table className={cn("w-full caption-bottom text-sm", className)} {...props} />
+  </div>
+);
+
+export const TableHeader = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <thead className={cn("[&_tr]:border-b", className)} {...props} />
+);
+
+export const TableBody = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+);
+
+export const TableFooter = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <tfoot className={cn("border-t bg-slate-50 font-medium", className)} {...props} />
+);
+
+export const TableRow = ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
+  <tr className={cn("border-b border-slate-200 transition-colors hover:bg-slate-50", className)} {...props} />
+);
+
+export const TableHead = ({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
+  <th className={cn("h-11 px-4 text-left align-middle font-medium text-slate-500", className)} {...props} />
+);
+
+export const TableCell = ({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
+  <td className={cn("p-4 align-middle", className)} {...props} />
+);
+
+export const TableCaption = ({ className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>) => (
+  <caption className={cn("mt-4 text-sm text-slate-500", className)} {...props} />
+);
+
+export default Table;