website refactor

apps/website/ui/Table.tsx

@@ -1,58 +1,59 @@
-import React, { ReactNode, HTMLAttributes } from 'react';
+import React, { ReactNode, ElementType } from 'react';
 import { Box, BoxProps } from './primitives/Box';
 
-interface TableProps extends HTMLAttributes<HTMLTableElement> {
+interface TableProps extends BoxProps<'table'> {
   children: ReactNode;
-  className?: string;
 }
 
 export function Table({ children, className = '', ...props }: TableProps) {
+  const { border, translate, ...rest } = props;
   return (
-    <Box overflow="auto" className="border border-border-gray rounded-sm">
-      <table className={`w-full border-collapse text-left ${className}`} {...props}>
+    <Box overflow="auto" border borderColor="border-border-gray" rounded="sm">
+      <table className={`w-full border-collapse text-left ${className}`} {...(rest as any)}>
         {children}
       </table>
     </Box>
   );
 }
 
-interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+interface TableHeaderProps extends BoxProps<'thead'> {
   children: ReactNode;
 }
 
-export function TableHead({ children, ...props }: TableHeadProps) {
+export function TableHeader({ children, className = '', ...props }: TableHeaderProps) {
   return (
-    <thead className="bg-graphite-black border-b border-border-gray" {...props}>
+    <Box as="thead" className={`bg-graphite-black border-b border-border-gray ${className}`} {...props}>
       {children}
-    </thead>
+    </Box>
   );
 }
 
-interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+export const TableHead = TableHeader;
+
+interface TableBodyProps extends BoxProps<'tbody'> {
   children: ReactNode;
 }
 
-export function TableBody({ children, ...props }: TableBodyProps) {
+export function TableBody({ children, className = '', ...props }: TableBodyProps) {
   return (
-    <tbody className="divide-y divide-border-gray/50" {...props}>
+    <Box as="tbody" className={`divide-y divide-border-gray/50 ${className}`} {...props}>
       {children}
-    </tbody>
+    </Box>
   );
 }
 
 interface TableRowProps extends BoxProps<'tr'> {
   children: ReactNode;
+  hoverBg?: string;
   clickable?: boolean;
-  variant?: 'default' | 'highlight';
+  variant?: string;
 }
 
-export function TableRow({ children, className = '', clickable = false, variant = 'default', ...props }: TableRowProps) {
-  const baseClasses = 'transition-colors duration-150 ease-smooth';
-  const variantClasses = variant === 'highlight' ? 'bg-primary-accent/5' : 'hover:bg-white/[0.02]';
+export function TableRow({ children, className = '', hoverBg, clickable, variant, ...props }: TableRowProps) {
   const classes = [
-    baseClasses,
-    variantClasses,
-    clickable ? 'cursor-pointer' : '',
+    'transition-colors',
+    clickable || props.onClick ? 'cursor-pointer' : '',
+    hoverBg ? `hover:${hoverBg}` : (clickable || props.onClick ? 'hover:bg-white/5' : ''),
     className
   ].filter(Boolean).join(' ');
 
@@ -63,13 +64,15 @@ export function TableRow({ children, className = '', clickable = false, variant
   );
 }
 
-interface TableHeaderProps extends BoxProps<'th'> {
+interface TableCellProps extends BoxProps<'td'> {
   children: ReactNode;
 }
 
-export function TableHeader({ children, className = '', ...props }: TableHeaderProps) {
-  const baseClasses = 'py-2.5 px-4 text-[11px] font-bold text-gray-500 uppercase tracking-wider';
-  const classes = [baseClasses, className].filter(Boolean).join(' ');
+export function TableHeaderCell({ children, className = '', ...props }: TableCellProps) {
+  const classes = [
+    'px-4 py-3 text-xs font-bold text-gray-400 uppercase tracking-wider',
+    className
+  ].filter(Boolean).join(' ');
 
   return (
     <Box as="th" className={classes} {...props}>
@@ -78,13 +81,11 @@ export function TableHeader({ children, className = '', ...props }: TableHeaderP
   );
 }
 
-interface TableCellProps extends BoxProps<'td'> {
-  children: ReactNode;
-}
-
 export function TableCell({ children, className = '', ...props }: TableCellProps) {
-  const baseClasses = 'py-3 px-4 text-sm text-gray-300';
-  const classes = [baseClasses, className].filter(Boolean).join(' ');
+  const classes = [
+    'px-4 py-4 text-sm text-gray-300',
+    className
+  ].filter(Boolean).join(' ');
 
   return (
     <Box as="td" className={classes} {...props}>