41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { cn } from '@/lib/utils'
|
|
|
|
function Table({ className, ...props }: React.ComponentProps<'table'>) {
|
|
return (
|
|
<div className="relative w-full overflow-auto">
|
|
<table className={cn('w-full caption-bottom text-sm', className)} {...props} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
|
|
return <thead className={cn('[&_tr]:border-b [&_tr]:border-border', className)} {...props} />
|
|
}
|
|
|
|
function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
|
|
return <tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} />
|
|
}
|
|
|
|
function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
|
|
return (
|
|
<tr
|
|
className={cn('border-b border-border transition-colors', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
|
|
return (
|
|
<th
|
|
className={cn('h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
|
|
return <td className={cn('px-3 py-2.5 align-top', className)} {...props} />
|
|
}
|
|
|
|
export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell }
|