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