website refactor

apps/website/ui/Table.tsx

@@ -1,88 +1,88 @@
-import { ReactNode } from 'react';
+import React, { ReactNode, HTMLAttributes } from 'react';
 
-interface TableProps {
+interface TableProps extends HTMLAttributes<HTMLTableElement> {
   children: ReactNode;
   className?: string;
 }
 
-export function Table({ children, className = '' }: TableProps) {
+export function Table({ children, className = '', ...props }: TableProps) {
   return (
-    <div className={`overflow-x-auto ${className}`}>
-      <table className="w-full">
+    <div style={{ overflowX: 'auto' }}>
+      <table className={`w-full ${className}`} {...props}>
         {children}
       </table>
     </div>
   );
 }
 
-interface TableHeadProps {
+interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
   children: ReactNode;
 }
 
-export function TableHead({ children }: TableHeadProps) {
+export function TableHead({ children, ...props }: TableHeadProps) {
   return (
-    <thead>
+    <thead {...props}>
       {children}
     </thead>
   );
 }
 
-interface TableBodyProps {
+interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
   children: ReactNode;
 }
 
-export function TableBody({ children }: TableBodyProps) {
+export function TableBody({ children, ...props }: TableBodyProps) {
   return (
-    <tbody>
+    <tbody {...props}>
       {children}
     </tbody>
   );
 }
 
-interface TableRowProps {
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
   children: ReactNode;
   className?: string;
 }
 
-export function TableRow({ children, className = '' }: TableRowProps) {
+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;
 
   return (
-    <tr className={classes}>
+    <tr className={classes} {...props}>
       {children}
     </tr>
   );
 }
 
-interface TableHeaderProps {
+interface TableHeaderProps extends HTMLAttributes<HTMLTableCellElement> {
   children: ReactNode;
   className?: string;
 }
 
-export function TableHeader({ children, className = '' }: TableHeaderProps) {
+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;
 
   return (
-    <th className={classes}>
+    <th className={classes} {...props}>
       {children}
     </th>
   );
 }
 
-interface TableCellProps {
+interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
   children: ReactNode;
   className?: string;
 }
 
-export function TableCell({ children, className = '' }: TableCellProps) {
+export function TableCell({ children, className = '', ...props }: TableCellProps) {
   const baseClasses = 'py-3 px-4';
   const classes = className ? `${baseClasses} ${className}` : baseClasses;
 
   return (
-    <td className={classes}>
+    <td className={classes} {...props}>
       {children}
     </td>
   );
-}
+}