api-getter

1
import * as React from 'react'
2

3
import { cn } from '@/lib/utils'
4

5
const Table = React.forwardRef<
6
	HTMLTableElement,
7
	React.HTMLAttributes<HTMLTableElement>
8
>(({ className, ...props }, ref) => (
9
	<div className='relative w-full glass-box off-scroll'>
10
		<table
11
			ref={ref}
12
			className={cn('w-full caption-bottom text-sm text-center', className)}
13
			{...props}
14
		/>
15
	</div>
16
))
17
Table.displayName = 'Table'
18

19
const TableHeader = React.forwardRef<
20
	HTMLTableSectionElement,
21
	React.HTMLAttributes<HTMLTableSectionElement>
22
>(({ className, ...props }, ref) => (
23
	<thead
24
		ref={ref}
25
		className={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',
27
			className
28
		)}
29
		{...props}
30
	/>
31
))
32
TableHeader.displayName = 'TableHeader'
33

34
const TableBody = React.forwardRef<
35
	HTMLTableSectionElement,
36
	React.HTMLAttributes<HTMLTableSectionElement>
37
>(({ className, ...props }, ref) => (
38
	<tbody
39
		ref={ref}
40
		className={cn(
41
			'[&_tr:last-child]:border-0 text-white/75 text-[10px] md:text-[14px] lg:text-[16px]',
42
			className
43
		)}
44
		{...props}
45
	/>
46
))
47
TableBody.displayName = 'TableBody'
48

49
const TableFooter = React.forwardRef<
50
	HTMLTableSectionElement,
51
	React.HTMLAttributes<HTMLTableSectionElement>
52
>(({ className, ...props }, ref) => (
53
	<tfoot
54
		ref={ref}
55
		className={cn(
56
			'border-t bg-white/50 font-medium [&>tr]:last:border-b-0 dark:bg-slate-800/50',
57
			className
58
		)}
59
		{...props}
60
	/>
61
))
62
TableFooter.displayName = 'TableFooter'
63

64
const TableRow = React.forwardRef<
65
	HTMLTableRowElement,
66
	React.HTMLAttributes<HTMLTableRowElement>
67
>(({ className, ...props }, ref) => (
68
	<tr
69
		ref={ref}
70
		className={cn('border-b border-white/50 transition-colors', className)}
71
		{...props}
72
	/>
73
))
74
TableRow.displayName = 'TableRow'
75

76
const TableHead = React.forwardRef<
77
	HTMLTableCellElement,
78
	React.ThHTMLAttributes<HTMLTableCellElement>
79
>(({ className, ...props }, ref) => (
80
	<th
81
		id={props.id}
82
		ref={ref}
83
		className={cn(
84
			'h-12 px-4 align-middle font-medium [&:has([role=checkbox])]:pr-0 first:rounded-tl-[10px] last:rounded-tr-[10px]',
85
			className
86
		)}
87
		{...props}
88
	/>
89
))
90
TableHead.displayName = 'TableHead'
91

92
const TableCell = React.forwardRef<
93
	HTMLTableCellElement,
94
	React.TdHTMLAttributes<HTMLTableCellElement>
95
>(({ className, ...props }, ref) => (
96
	<td
97
		ref={ref}
98
		className={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',
100
			className
101
		)}
102
		{...props}
103
	/>
104
))
105
TableCell.displayName = 'TableCell'
106

107
const TableCaption = React.forwardRef<
108
	HTMLTableCaptionElement,
109
	React.HTMLAttributes<HTMLTableCaptionElement>
110
>(({ className, ...props }, ref) => (
111
	<caption ref={ref} className={cn('mt-4 text-sm', className)} {...props} />
112
))
113
TableCaption.displayName = 'TableCaption'
114

115
export {
116
	Table,
117
	TableBody,
118
	TableCaption,
119
	TableCell,
120
	TableFooter,
121
	TableHead,
122
	TableHeader,
123
	TableRow,
124
}
125