BucketTableHeader.tsx41 lines · main

1	import { TableHead, TableHeader, TableRow } from 'ui'
2
3	import {
4	VirtualizedTableHead,
5	VirtualizedTableHeader,
6	VirtualizedTableRow,
7	} from '@/components/ui/VirtualizedTable'
8
9	type BucketTableMode = 'standard' | 'virtualized'
10
11	type BucketTableHeaderProps = {
12	mode: BucketTableMode
13	hasBuckets?: boolean
14	}
15
16	export const BucketTableHeader = ({ mode, hasBuckets = true }: BucketTableHeaderProps) => {
17	const BucketTableHeader = mode === 'standard' ? TableHeader : VirtualizedTableHeader
18	const BucketTableRow = mode === 'standard' ? TableRow : VirtualizedTableRow
19	const BucketTableHead = mode === 'standard' ? TableHead : VirtualizedTableHead
20
21	const stickyClasses = 'sticky top-0 z-10 bg-200'
22
23	return (
24	<BucketTableHeader>
25	<BucketTableRow>
26	{hasBuckets && (
27	<BucketTableHead className={`${stickyClasses} w-2 pr-1`}>
28	<span className="sr-only">Icon</span>
29	</BucketTableHead>
30	)}
31	<BucketTableHead className={stickyClasses}>Name</BucketTableHead>
32	<BucketTableHead className={stickyClasses}>Policies</BucketTableHead>
33	<BucketTableHead className={stickyClasses}>File size limit</BucketTableHead>
34	<BucketTableHead className={stickyClasses}>Allowed MIME types</BucketTableHead>
35	<BucketTableHead className={stickyClasses}>
36	<span className="sr-only">Actions</span>
37	</BucketTableHead>
38	</BucketTableRow>
39	</BucketTableHeader>
40	)
41	}