BucketFilePickerHeaderSelection.tsx27 lines · main

1	import { X } from 'lucide-react'
2	import { Button } from 'ui'
3
4	import { useBucketFilePickerStateSnapshot } from './BucketFilePickerState'
5
6	export const BucketFilePickerHeaderSelection = () => {
7	const { selectedItems, clearSelectedItems } = useBucketFilePickerStateSnapshot()
8
9	return (
10	<div className="z-10 flex h-[40px] items-center rounded-t-md bg-brand-400 px-2 py-1 shadow in-data-[theme*=dark]:bg-brand-500">
11	<Button
12	icon={<X size={16} strokeWidth={2} />}
13	type="text"
14	onClick={() => clearSelectedItems()}
15	aria-label="Clear selected items"
16	/>
17	<div className="ml-1 flex items-center space-x-3">
18	<p className="mb-0 text-sm text-foreground">
19	<span style={{ fontVariantNumeric: 'tabular-nums' }}>{selectedItems.length}</span> items
20	selected
21	</p>
22
23	<div className="border-r border-green-900 py-3 opacity-50" />
24	</div>
25	</div>
26	)
27	}