website refactor

apps/website/ui/Table.tsx

@@ -1,95 +1,87 @@
-import React, { ReactNode, ElementType } from 'react';
-import { Box, BoxProps } from './primitives/Box';
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Surface } from './primitives/Surface';
 
-interface TableProps extends BoxProps<'table'> {
+export interface TableProps {
   children: ReactNode;
+  className?: string;
 }
 
-export function Table({ children, className = '', ...props }: TableProps) {
-  const { border, translate, ...rest } = props;
+export const Table = ({ children, className }: TableProps) => {
   return (
-    <Box overflow="auto" border borderColor="border-border-gray" rounded="sm">
-      <table className={`w-full border-collapse text-left ${className}`} {...(rest as any)}>
+    <Surface rounded="lg" shadow="sm" style={{ overflow: 'auto', border: '1px solid var(--ui-color-border-default)' }} className={className}>
+      <table className="w-full border-collapse text-left">
         {children}
       </table>
-    </Box>
+    </Surface>
   );
-}
+};
 
-interface TableHeaderProps extends BoxProps<'thead'> {
-  children: ReactNode;
-}
-
-export function TableHeader({ children, className = '', ...props }: TableHeaderProps) {
+export const TableHeader = ({ children, className, textAlign, w }: { children: ReactNode, className?: string, textAlign?: 'left' | 'center' | 'right', w?: string }) => {
   return (
-    <Box as="thead" className={`bg-graphite-black border-b border-border-gray ${className}`} {...props}>
-      {children}
-    </Box>
+    <thead className={`bg-[var(--ui-color-bg-base)] border-b border-[var(--ui-color-border-default)] ${className || ''}`}>
+      <tr>
+        {React.Children.map(children, child => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child as any, { textAlign: textAlign || (child.props as any).textAlign, w: w || (child.props as any).w });
+          }
+          return child;
+        })}
+      </tr>
+    </thead>
   );
-}
+};
 
 export const TableHead = TableHeader;
 
-interface TableBodyProps extends BoxProps<'tbody'> {
-  children: ReactNode;
-}
-
-export function TableBody({ children, className = '', ...props }: TableBodyProps) {
+export const TableBody = ({ children }: { children: ReactNode }) => {
   return (
-    <Box as="tbody" className={`divide-y divide-border-gray/50 ${className}`} {...props}>
+    <tbody className="divide-y divide-[var(--ui-color-border-muted)]">
       {children}
-    </Box>
+    </tbody>
   );
-}
-
-interface TableRowProps extends BoxProps<'tr'> {
-  children: ReactNode;
-  hoverBg?: string;
-  clickable?: boolean;
-  variant?: string;
-}
-
-export function TableRow({ children, className = '', hoverBg, clickable, variant, ...props }: TableRowProps) {
-  const classes = [
-    'transition-colors',
-    clickable || props.onClick ? 'cursor-pointer' : '',
-    hoverBg ? `hover:${hoverBg}` : (clickable || props.onClick ? 'hover:bg-white/5' : ''),
-    className
-  ].filter(Boolean).join(' ');
+};
 
+export const TableRow = ({ children, onClick, className, variant, clickable, bg, ...props }: { children: ReactNode, onClick?: () => void, className?: string, variant?: string, clickable?: boolean, bg?: string, [key: string]: any }) => {
+  const isClickable = clickable || !!onClick;
   return (
-    <Box as="tr" className={classes} {...props}>
+    <tr 
+      className={`${isClickable ? 'cursor-pointer hover:bg-white/5 transition-colors' : ''} ${variant === 'highlight' ? 'bg-white/5' : ''} ${className || ''}`}
+      onClick={onClick}
+      style={bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : undefined}
+      {...props}
+    >
       {children}
-    </Box>
+    </tr>
   );
-}
-
-interface TableCellProps extends BoxProps<'td'> {
-  children: ReactNode;
-}
-
-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(' ');
+};
 
+export const TableHeaderCell = ({ children, textAlign, w, className }: { children: ReactNode, textAlign?: 'left' | 'center' | 'right', w?: string, className?: string }) => {
+  const alignClass = textAlign === 'center' ? 'text-center' : (textAlign === 'right' ? 'text-right' : 'text-left');
   return (
-    <Box as="th" className={classes} {...props}>
+    <th 
+      className={`px-4 py-3 text-xs font-bold uppercase tracking-wider text-[var(--ui-color-text-low)] ${alignClass} ${className || ''}`}
+      style={w ? { width: w } : undefined}
+    >
       {children}
-    </Box>
+    </th>
   );
-}
-
-export function TableCell({ children, className = '', ...props }: TableCellProps) {
-  const classes = [
-    'px-4 py-4 text-sm text-gray-300',
-    className
-  ].filter(Boolean).join(' ');
+};
 
+export const TableCell = ({ children, textAlign, className, py, colSpan, w, position, ...props }: { children: ReactNode, textAlign?: 'left' | 'center' | 'right', className?: string, py?: number, colSpan?: number, w?: string, position?: string, [key: string]: any }) => {
+  const alignClass = textAlign === 'center' ? 'text-center' : (textAlign === 'right' ? 'text-right' : 'text-left');
   return (
-    <Box as="td" className={classes} {...props}>
+    <td 
+      className={`px-4 py-3 text-sm text-[var(--ui-color-text-high)] ${alignClass} ${className || ''}`}
+      colSpan={colSpan}
+      style={{
+        ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
+        ...(w ? { width: w } : {}),
+        ...(position ? { position: position as any } : {}),
+      }}
+      {...props}
+    >
       {children}
-    </Box>
+    </td>
   );
-}
+};