OpenFlare/frontend/components/ui/docs-table.tsx

import * as React from "react"
import { cn } from "@/lib/utils"

const DocsTable = React.forwardRef<
  HTMLTableElement,
  React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
  <div className="w-full overflow-x-auto rounded-lg border border-border/50">
    <table
      ref={ref}
      className={cn("min-w-full text-sm text-left !my-0", className)}
      {...props}
    />
  </div>
))
DocsTable.displayName = "DocsTable"

const DocsTableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <thead ref={ref} className={cn("bg-muted/50 text-muted-foreground font-medium border-b border-border/50", className)} {...props} />
))
DocsTableHeader.displayName = "DocsTableHeader"

const DocsTableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tbody
    ref={ref}
    className={cn("bg-background", className)}
    {...props}
  />
))
DocsTableBody.displayName = "DocsTableBody"

const DocsTableRow = React.forwardRef<
  HTMLTableRowElement,
  React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
  <tr
    ref={ref}
    className={cn("transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border/50 last:border-0", className)}
    {...props}
  />
))
DocsTableRow.displayName = "DocsTableRow"

const DocsTableHead = React.forwardRef<
  HTMLTableCellElement,
  React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <th
    ref={ref}
    className={cn(
      "pl-6 pr-4 py-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 first:pl-6 last:pr-6",
      className
    )}
    {...props}
  />
))
DocsTableHead.displayName = "DocsTableHead"

const DocsTableCell = React.forwardRef<
  HTMLTableCellElement,
  React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <td
    ref={ref}
    className={cn("pl-6 pr-4 py-2 align-middle [&:has([role=checkbox])]:pr-0 first:pl-6 last:pr-6", className)}
    {...props}
  />
))
DocsTableCell.displayName = "DocsTableCell"

export {
  DocsTable,
  DocsTableHeader,
  DocsTableBody,
  DocsTableHead,
  DocsTableRow,
  DocsTableCell,
}