表格组件

import React, { forwardRef } from 'react';

export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  variant?: 'default' | 'bordered' | 'striped';
}


export interface TableBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  Item: (number|string|React.ReactNode)[][]|HTMLDivElement[];
  className?: string;
}

export const Table = forwardRef<HTMLDivElement, TableProps>(
  ({ className, variant = 'default', children, ...props }, ref) => {
    const baseClasses = "w-full overflow-hidden";
    
    const variantClasses = {
      default: "",
      bordered: "border border-gray-200 dark:border-gray-800 rounded-lg",
      striped: ""
    };
    
    const classes = [
      baseClasses,
      variantClasses[variant],
      className
    ].filter(Boolean).join(' ');

    return (
      <div 
        ref={ref}
        className={classes}
        data-table="root"
        {...props}
      >
        {children}
      </div>
    );
  }
);

Table.displayName = 'Table';



export const TableBody = forwardRef<HTMLDivElement, TableBodyProps>(
  ({ className, Item, ...props }, ref) => {
    const classes = [
      "w-full",
      className
    ].filter(Boolean).join(' ');

    const formatItems = () => {
      if (!Array.isArray(Item)) {
        return [];
      }
      
      if (Array.isArray(Item[0])) {
        return Item;
      }
      
      return [[...(Item as unknown as (number|string)[])]];
    };

    const formattedItems = formatItems();

    return (
      <div ref={ref} className={classes} data-table="body" {...props}>
        <table className="w-full">
          <tbody>
            {formattedItems.map((row, rowIndex) => (
              <tr 
                key={rowIndex} 
                className="border-b  border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors"
              >
                {Array.isArray(row) ? row.map((cell, cellIndex) => (
                  <td 
                    key={cellIndex} 
                    className="py-3 px-4 text-gray-700 dark:text-gray-300"
                  >
                    {cell}
                  </td>
                )):''}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
);

TableBody.displayName = 'TableBody';