konnosDashboard
index.tsx81 lines · main
1import { useBreakpoint } from 'common'
2import {
3 Dialog,
4 DialogContent,
5 DialogHeader,
6 DialogTitle,
7 Sheet,
8 SheetContent,
9 SheetHeader,
10 SheetTitle,
11} from 'ui'
12
13import { BucketFilePickerExplorer } from './BucketFilePickerExplorer'
14import { BucketFilePickerStateContextProvider } from './BucketFilePickerState'
15import type { Bucket } from '@/data/storage/buckets-query'
16
17export type BucketsFilePickerDialogProps = {
18 open: boolean
19 onOpenChange: (open: boolean) => void
20 selectedBucket: Bucket
21 acceptedFileExtensions?: string[]
22 onSelect: (value: string) => void
23}
24
25export function BucketsFilePickerDialog({
26 open,
27 onOpenChange,
28 selectedBucket,
29 acceptedFileExtensions,
30 onSelect,
31}: BucketsFilePickerDialogProps) {
32 const isMobileLayout = useBreakpoint('lg')
33
34 const handleSelect = (value: string) => {
35 onSelect(value)
36 onOpenChange(false)
37 }
38
39 return (
40 <>
41 {isMobileLayout ? (
42 <Sheet open={open} onOpenChange={onOpenChange}>
43 <SheetContent side="bottom" className="flex h-[85vh] flex-col gap-0 p-0">
44 <SheetHeader className="flex flex-row items-center gap-2 border-b border-overlay px-4 py-3 text-left">
45 <SheetTitle className="min-w-0 flex-1 text-left">Choose a file</SheetTitle>
46 </SheetHeader>
47 <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col px-2 pb-3 pt-2">
48 <BucketFilePickerStateContextProvider
49 bucket={selectedBucket}
50 maxFiles={1}
51 acceptedFileExtensions={acceptedFileExtensions}
52 >
53 <BucketFilePickerExplorer onSelect={handleSelect} />
54 </BucketFilePickerStateContextProvider>
55 </div>
56 </SheetContent>
57 </Sheet>
58 ) : (
59 <Dialog open={open} onOpenChange={onOpenChange}>
60 <DialogContent
61 size="xxlarge"
62 className="flex h-[85vh] max-h-[500px] max-w-5xl flex-col gap-0 overflow-hidden p-0"
63 >
64 <DialogHeader className="flex flex-row items-center gap-2 border-b border-overlay px-6 py-4">
65 <DialogTitle className="min-w-0 flex-1">Choose a file</DialogTitle>
66 </DialogHeader>
67 <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden p-3">
68 <BucketFilePickerStateContextProvider
69 bucket={selectedBucket}
70 maxFiles={1}
71 acceptedFileExtensions={acceptedFileExtensions}
72 >
73 <BucketFilePickerExplorer onSelect={handleSelect} />
74 </BucketFilePickerStateContextProvider>
75 </div>
76 </DialogContent>
77 </Dialog>
78 )}
79 </>
80 )
81}