Table.astro

---
import type { DesktopTableClassses } from "./DesktopTableClassses"
import type { MobileTableClassses } from "./MobileTableClassses"
import { tableVisibilityClasses } from "./tableVisibilityClasses"
import { classMerge } from "~ui/utils/classMerge"
import { type TailwindBreakpoint, tailwindBreakpoint } from "~ui/utils/tailwindBreakpoint"
import type { TableColumnDef } from "./TableColumnDef"
import TableD from "./TableD.astro"
import TableM from "./TableM.astro"

interface Props {
  rows: string[]
  columns: TableColumnDef[]
  mobileClasses?: MobileTableClassses
  desktopClasses?: DesktopTableClassses
  breakpoint?: TailwindBreakpoint
  class?: string
  noEntriesText?: string
}
const props = Astro.props
const rows = props.rows
const columns = props.columns
const desktopClasses = props.desktopClasses
const mobileClasses = props.mobileClasses
const breakpoint = props.breakpoint ?? tailwindBreakpoint.sm
---

<TableD
  rows={rows}
  columns={columns}
  class={classMerge(props.class, tableVisibilityClasses.desktop(breakpoint))}
  desktopClasses={desktopClasses}
  noEntriesText={props.noEntriesText}
/>
<TableM
  rows={rows}
  columns={columns}
  class={classMerge(props.class, tableVisibilityClasses.mobile(breakpoint))}
  mobileClasses={mobileClasses}
  noEntriesText={props.noEntriesText}
/>