2022-12-19 09:41:11 -08:00
|
|
|
import dayjs from 'dayjs'
|
2022-11-20 02:44:14 -08:00
|
|
|
import { ReactNode } from 'react'
|
|
|
|
|
|
|
|
export const Table = ({
|
|
|
|
children,
|
|
|
|
className,
|
|
|
|
}: {
|
|
|
|
children: ReactNode
|
|
|
|
className?: string
|
|
|
|
}) => <table className={`m-0 min-w-full p-0 ${className}`}>{children}</table>
|
|
|
|
|
|
|
|
export const TrHead = ({
|
|
|
|
children,
|
|
|
|
className,
|
|
|
|
}: {
|
|
|
|
children: ReactNode
|
|
|
|
className?: string
|
|
|
|
}) => <tr className={`border-b border-th-bkg-3 ${className}`}>{children}</tr>
|
|
|
|
|
|
|
|
export const Th = ({
|
|
|
|
children,
|
|
|
|
className,
|
|
|
|
id,
|
|
|
|
}: {
|
|
|
|
children?: ReactNode
|
|
|
|
className?: string
|
|
|
|
id?: string
|
|
|
|
}) => (
|
|
|
|
<th
|
|
|
|
className={`px-6 py-3 text-xs font-normal text-th-fgd-3 ${className}`}
|
|
|
|
id={id}
|
|
|
|
scope="col"
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</th>
|
|
|
|
)
|
|
|
|
|
|
|
|
export const TrBody = ({
|
|
|
|
children,
|
|
|
|
className,
|
|
|
|
onClick,
|
|
|
|
}: {
|
|
|
|
children: ReactNode
|
|
|
|
className?: string
|
|
|
|
onClick?: () => void
|
|
|
|
}) => (
|
|
|
|
<tr className={`border-y border-th-bkg-3 p-2 ${className}`} onClick={onClick}>
|
|
|
|
{children}
|
|
|
|
</tr>
|
|
|
|
)
|
|
|
|
|
|
|
|
export const Td = ({
|
|
|
|
children,
|
|
|
|
className,
|
|
|
|
}: {
|
|
|
|
children: ReactNode
|
|
|
|
className?: string
|
|
|
|
}) => <td className={`px-6 py-3 ${className}`}>{children}</td>
|
2022-12-19 09:41:11 -08:00
|
|
|
|
|
|
|
export const TableDateDisplay = ({
|
|
|
|
date,
|
|
|
|
showSeconds,
|
|
|
|
}: {
|
|
|
|
date: string | number
|
|
|
|
showSeconds?: boolean
|
|
|
|
}) => (
|
|
|
|
<>
|
2023-01-06 16:26:06 -08:00
|
|
|
<p className="tracking-normal text-th-fgd-2">
|
|
|
|
{dayjs(date).format('DD MMM YYYY')}
|
|
|
|
</p>
|
2022-12-19 16:42:13 -08:00
|
|
|
<p className="text-xs text-th-fgd-4">
|
2022-12-19 09:41:11 -08:00
|
|
|
{dayjs(date).format(showSeconds ? 'h:mm:ssa' : 'h:mma')}
|
|
|
|
</p>
|
|
|
|
</>
|
|
|
|
)
|