api-getter
124 строки · 2.9 Кб
1import * as React from 'react'
2
3import { cn } from '@/lib/utils'
4
5const Table = React.forwardRef<
6HTMLTableElement,
7React.HTMLAttributes<HTMLTableElement>
8>(({ className, ...props }, ref) => (
9<div className='relative w-full glass-box off-scroll'>
10<table
11ref={ref}
12className={cn('w-full caption-bottom text-sm text-center', className)}
13{...props}
14/>
15</div>
16))
17Table.displayName = 'Table'
18
19const TableHeader = React.forwardRef<
20HTMLTableSectionElement,
21React.HTMLAttributes<HTMLTableSectionElement>
22>(({ className, ...props }, ref) => (
23<thead
24ref={ref}
25className={cn(
26'border-b border-white/50 text-[10px] md:text-[16px] lg:text-[24px]/[120%] font-medium h-[85px] bg-black-default z-20',
27className
28)}
29{...props}
30/>
31))
32TableHeader.displayName = 'TableHeader'
33
34const TableBody = React.forwardRef<
35HTMLTableSectionElement,
36React.HTMLAttributes<HTMLTableSectionElement>
37>(({ className, ...props }, ref) => (
38<tbody
39ref={ref}
40className={cn(
41'[&_tr:last-child]:border-0 text-white/75 text-[10px] md:text-[14px] lg:text-[16px]',
42className
43)}
44{...props}
45/>
46))
47TableBody.displayName = 'TableBody'
48
49const TableFooter = React.forwardRef<
50HTMLTableSectionElement,
51React.HTMLAttributes<HTMLTableSectionElement>
52>(({ className, ...props }, ref) => (
53<tfoot
54ref={ref}
55className={cn(
56'border-t bg-white/50 font-medium [&>tr]:last:border-b-0 dark:bg-slate-800/50',
57className
58)}
59{...props}
60/>
61))
62TableFooter.displayName = 'TableFooter'
63
64const TableRow = React.forwardRef<
65HTMLTableRowElement,
66React.HTMLAttributes<HTMLTableRowElement>
67>(({ className, ...props }, ref) => (
68<tr
69ref={ref}
70className={cn('border-b border-white/50 transition-colors', className)}
71{...props}
72/>
73))
74TableRow.displayName = 'TableRow'
75
76const TableHead = React.forwardRef<
77HTMLTableCellElement,
78React.ThHTMLAttributes<HTMLTableCellElement>
79>(({ className, ...props }, ref) => (
80<th
81id={props.id}
82ref={ref}
83className={cn(
84'h-12 px-4 align-middle font-medium [&:has([role=checkbox])]:pr-0 first:rounded-tl-[10px] last:rounded-tr-[10px]',
85className
86)}
87{...props}
88/>
89))
90TableHead.displayName = 'TableHead'
91
92const TableCell = React.forwardRef<
93HTMLTableCellElement,
94React.TdHTMLAttributes<HTMLTableCellElement>
95>(({ className, ...props }, ref) => (
96<td
97ref={ref}
98className={cn(
99'min-w-[100px] md:min-w-[140px] max-w-[270px] text-ellipsis overflow-hidden p-4 align-middle justify-start [&:has([role=checkbox])]:pr-0',
100className
101)}
102{...props}
103/>
104))
105TableCell.displayName = 'TableCell'
106
107const TableCaption = React.forwardRef<
108HTMLTableCaptionElement,
109React.HTMLAttributes<HTMLTableCaptionElement>
110>(({ className, ...props }, ref) => (
111<caption ref={ref} className={cn('mt-4 text-sm', className)} {...props} />
112))
113TableCaption.displayName = 'TableCaption'
114
115export {
116Table,
117TableBody,
118TableCaption,
119TableCell,
120TableFooter,
121TableHead,
122TableHeader,
123TableRow,
124}
125