wmq
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react'
|
|
import { cn } from '@/utils/cn'
|
|
|
|
export function Table({ className, ...props }: HTMLAttributes<HTMLTableElement>) {
|
|
return (
|
|
<div className="w-full overflow-x-auto scrollbar-thin">
|
|
<table className={cn('w-full text-sm', className)} {...props} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function THead({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
|
|
return <thead className={cn('border-b border-border bg-muted/50', className)} {...props} />
|
|
}
|
|
|
|
export function TBody({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
|
|
return <tbody className={cn('divide-y divide-border', className)} {...props} />
|
|
}
|
|
|
|
export function Tr({ className, ...props }: HTMLAttributes<HTMLTableRowElement>) {
|
|
return <tr className={cn('transition-colors hover:bg-muted/40', className)} {...props} />
|
|
}
|
|
|
|
export function Th({ className, ...props }: ThHTMLAttributes<HTMLTableCellElement>) {
|
|
return (
|
|
<th
|
|
className={cn('whitespace-nowrap px-3 py-2.5 text-start text-xs font-medium text-muted-foreground', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function Td({ className, colSpan, ...props }: TdHTMLAttributes<HTMLTableCellElement>) {
|
|
return <td className={cn('px-3 py-2.5 align-middle', className)} colSpan={colSpan} {...props} />
|
|
}
|