import { range } from '../../../utils';
import { Each } from '../../00-base';
/**
 * TableSkeleton component for rendering a skeleton loader for a table with a specified number of rows and columns.
 *
 * @component
 * @example
 * // Example usage of TableSkeleton component
 * <TableSkeleton numberOfRows={5} numberOfColumns={3} />
 *
 * @param {Object} props - The properties of the TableSkeleton component.
 * @param {number} props.numberOfRows - The number of rows to render in the skeleton.
 * @param {number} props.numberOfColumns - The number of columns to render in the skeleton.
 *
 * @returns {ReactNode} The rendered TableSkeleton component.
 */
export function TableSkeleton({ numberOfColumns, numberOfRows, }) {
    return (<Each of={range(numberOfRows)} render={(item) => (<tr key={item}>
          <Each of={range(numberOfColumns)} render={(item) => (<td key={item} className="px-4 py-5">
                <div role="status" className="animate-pulse">
                  <div className="bg-gray-2 h-2.5 w-16 rounded-full"></div>
                </div>
              </td>)}/>
        </tr>)}/>);
}
//# sourceMappingURL=TableSkeleton.jsx.map