Glass Table

1import * as React from 'react'
2 
3import { cn } from '@/lib/utils'
4 
5function GlassTable({ className, ...props }: React.ComponentProps<'table'>) {
6  return (
7    <div className="overflow-x-auto">
8      <table className={cn('w-full text-left text-sm', className)} {...props} />
9    </div>
10  )
11}
12 
13function GlassTableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
14  return <thead className={cn('[&_tr]:border-b [&_tr]:border-border', className)} {...props} />
15}
16 
17function GlassTableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
18  return <tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} />
19}
20 
21function GlassTableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
22  return <tfoot className={cn('border-t border-border font-medium', className)} {...props} />
23}
24 
25function GlassTableRow({ className, ...props }: React.ComponentProps<'tr'>) {
26  return (
27    <tr
28      className={cn('border-b border-foreground/10 last:border-0 transition-colors hover:bg-foreground/3', className)}
29      {...props}
30    />
31  )
32}
33 
34function GlassTableHead({ className, ...props }: React.ComponentProps<'th'>) {
35  return (
36    <th
37      className={cn('py-2 pr-4 font-mono text-[0.75rem] tracking-[0.2em] uppercase text-muted-foreground font-normal', className)}
38      {...props}
39    />
40  )
41}
42 
43function GlassTableCell({ className, ...props }: React.ComponentProps<'td'>) {
44  return <td className={cn('py-2 pr-4', className)} {...props} />
45}
46 
47function GlassTableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
48  return <caption className={cn('mt-3 text-xs text-muted-foreground', className)} {...props} />
49}
50 
51export {
52  GlassTable,
53  GlassTableHeader,
54  GlassTableBody,
55  GlassTableFooter,
56  GlassTableRow,
57  GlassTableHead,
58  GlassTableCell,
59  GlassTableCaption,
60}