HiveGrid-Wireframes/hivegrid-cloud/apps/web/app/ui/components/Table/Table.tsx

"use client";
/*
 * Documentation:
 * Table — https://app.subframe.com/f023064a5ca0/library?component=Table_142dfde7-d0cc-48a1-a04c-a08ab2252633
 */

import React from "react";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface CellProps
  extends React.TdHTMLAttributes<HTMLTableDataCellElement> {
  children?: React.ReactNode;
  variant?: "align-left" | "align-center";
  className?: string;
}

const Cell = React.forwardRef<HTMLTableDataCellElement, CellProps>(
  function Cell(
    { children, variant = "align-left", className, ...otherProps }: CellProps,
    ref
  ) {
    return (
      <td className={className} ref={ref} {...otherProps}>
        <div
          className={SubframeUtils.twClassNames(
            "group/291d4418 flex h-full min-h-[48px] w-full items-center border-r border-solid border-border-default px-4 py-1",
            { "justify-center": variant === "align-center" }
          )}
        >
          {children}
        </div>
      </td>
    );
  }
);

export interface HeaderCellProps
  extends React.ThHTMLAttributes<HTMLTableHeaderCellElement> {
  children?: React.ReactNode;
  icon?: React.ReactNode;
  className?: string;
}

const HeaderCell = React.forwardRef<
  HTMLTableHeaderCellElement,
  HeaderCellProps
>(function HeaderCell(
  { children, icon = null, className, ...otherProps }: HeaderCellProps,
  ref
) {
  return (
    <th
      className={SubframeUtils.twClassNames("h-10", className)}
      ref={ref}
      {...otherProps}
    >
      <div className="flex h-full w-full items-center gap-1 border-r border-solid border-border-default px-4 text-left last:border-r-0">
        {children ? (
          <span className="whitespace-nowrap text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-text-neutral-secondary">
            {children}
          </span>
        ) : null}
        {icon ? (
          <SubframeCore.IconWrapper className="text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-icon-neutral-tertiary">
            {icon}
          </SubframeCore.IconWrapper>
        ) : null}
      </div>
    </th>
  );
});

export interface HeaderRowProps
  extends React.HTMLAttributes<HTMLTableRowElement> {
  children?: React.ReactNode;
  className?: string;
}

const HeaderRow = React.forwardRef<HTMLTableRowElement, HeaderRowProps>(
  function HeaderRow(
    { children, className, ...otherProps }: HeaderRowProps,
    ref
  ) {
    return (
      <tr className={className} ref={ref} {...otherProps}>
        {children}
      </tr>
    );
  }
);

export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
  children?: React.ReactNode;
  clickable?: boolean;
  className?: string;
}

const Row = React.forwardRef<HTMLTableRowElement, RowProps>(function Row(
  { children, clickable = false, className, ...otherProps }: RowProps,
  ref
) {
  return (
    <tr
      className={SubframeUtils.twClassNames(
        "group/5d119f8d border-t border-solid border-border-default bg-surface-neutral-secondary",
        { "hover:bg-surface-neutral-tertiary": clickable },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {children}
    </tr>
  );
});

export interface TableRootProps
  extends React.TableHTMLAttributes<HTMLTableElement> {
  header?: React.ReactNode;
  children?: React.ReactNode;
  emptyText?: React.ReactNode;
  variant?: "default" | "disabled";
  className?: string;
}

const TableRoot = React.forwardRef<HTMLTableElement, TableRootProps>(
  function TableRoot(
    {
      header,
      children,
      emptyText,
      variant = "default",
      className,
      ...otherProps
    }: TableRootProps,
    ref
  ) {
    return (
      <table
        className={SubframeUtils.twClassNames(
          "group/142dfde7 h-fit w-full border border-solid border-border-default bg-surface-neutral-primary border-collapse",
          {
            "bg-surface-neutral-disabled opacity-60 pointer-events-none":
              variant === "disabled",
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <thead>{header}</thead>
        <tbody className="border-b border-solid border-border-default">
          {children}
        </tbody>
      </table>
    );
  }
);

export const Table = Object.assign(TableRoot, {
  Cell,
  HeaderCell,
  HeaderRow,
  Row,
});