website refactor

apps/website/ui/Table.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, HTMLAttributes } from 'react';
+import React, { ReactNode, HTMLAttributes, ElementType } from 'react';
+import { Box, BoxProps } from './Box';
 
 interface TableProps extends HTMLAttributes<HTMLTableElement> {
   children: ReactNode;
@@ -7,11 +8,11 @@ interface TableProps extends HTMLAttributes<HTMLTableElement> {
 
 export function Table({ children, className = '', ...props }: TableProps) {
   return (
-    <div style={{ overflowX: 'auto' }}>
+    <Box overflow="auto">
       <table className={`w-full ${className}`} {...props}>
         {children}
       </table>
-    </div>
+    </Box>
   );
 }
 
@@ -39,50 +40,55 @@ export function TableBody({ children, ...props }: TableBodyProps) {
   );
 }
 
-interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+interface TableRowProps extends BoxProps<'tr'> {
   children: ReactNode;
-  className?: string;
+  clickable?: boolean;
+  variant?: 'default' | 'highlight';
 }
 
-export function TableRow({ children, className = '', ...props }: TableRowProps) {
-  const baseClasses = 'border-b border-charcoal-outline/50 hover:bg-iron-gray/30 transition-colors';
-  const classes = className ? `${baseClasses} ${className}` : baseClasses;
+export function TableRow({ children, className = '', clickable = false, variant = 'default', ...props }: TableRowProps) {
+  const baseClasses = 'border-b border-charcoal-outline/50 transition-colors';
+  const variantClasses = variant === 'highlight' ? 'bg-primary-blue/5' : '';
+  const classes = [
+    baseClasses,
+    variantClasses,
+    clickable ? 'cursor-pointer' : '',
+    className
+  ].filter(Boolean).join(' ');
 
   return (
-    <tr className={classes} {...props}>
+    <Box as="tr" className={classes} {...props}>
       {children}
-    </tr>
+    </Box>
   );
 }
 
-interface TableHeaderProps extends HTMLAttributes<HTMLTableCellElement> {
+interface TableHeaderProps extends BoxProps<'th'> {
   children: ReactNode;
-  className?: string;
 }
 
 export function TableHeader({ children, className = '', ...props }: TableHeaderProps) {
-  const baseClasses = 'text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase';
-  const classes = className ? `${baseClasses} ${className}` : baseClasses;
+  const baseClasses = 'py-3 px-4 text-xs font-medium text-gray-400 uppercase';
+  const classes = [baseClasses, className].filter(Boolean).join(' ');
 
   return (
-    <th className={classes} {...props}>
+    <Box as="th" className={classes} {...props}>
       {children}
-    </th>
+    </Box>
   );
 }
 
-interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
+interface TableCellProps extends BoxProps<'td'> {
   children: ReactNode;
-  className?: string;
 }
 
 export function TableCell({ children, className = '', ...props }: TableCellProps) {
   const baseClasses = 'py-3 px-4';
-  const classes = className ? `${baseClasses} ${className}` : baseClasses;
+  const classes = [baseClasses, className].filter(Boolean).join(' ');
 
   return (
-    <td className={classes} {...props}>
+    <Box as="td" className={classes} {...props}>
       {children}
-    </td>
+    </Box>
   );
 }