konnosDashboard
Bucket.tsx107 lines · main
1import { useParams } from 'common'
2import { Badge } from 'ui'
3
4import { DOCS_RESOURCE_CONTENT } from '../ProjectAPIDocs.constants'
5import ResourceContent from '../ResourceContent'
6import type { ContentProps } from './Content.types'
7import { useBucketInfoQueryPreferCached } from '@/data/storage/buckets-query'
8import { formatBytes } from '@/lib/helpers'
9import { useAppStateSnapshot } from '@/state/app-state'
10
11export const Bucket = ({ language, apikey, endpoint }: ContentProps) => {
12 const { ref } = useParams()
13
14 const snap = useAppStateSnapshot()
15 const resource = snap.activeDocsSection[1]
16
17 const bucket = useBucketInfoQueryPreferCached(resource, ref)
18 const allowedMimeTypes = bucket?.allowed_mime_types
19 const maxFileSizeLimit = bucket?.file_size_limit
20
21 if (bucket === undefined) return null
22
23 return (
24 <div className="divide-y">
25 <div className="space-y-1 px-4 py-4">
26 <div className="flex items-center space-x-2">
27 <h2>{bucket.name}</h2>
28 <Badge variant={bucket.public ? 'warning' : 'default'}>
29 {bucket.public ? 'Public' : 'Private'}
30 </Badge>
31 </div>
32 <p className="text-sm text-foreground-light">
33 Allowed MIME types:{' '}
34 {allowedMimeTypes === null
35 ? 'All types are allowed'
36 : (allowedMimeTypes ?? []).length === 0
37 ? 'No types are allowed'
38 : (allowedMimeTypes ?? []).length > 1
39 ? (allowedMimeTypes ?? []).join(', ')
40 : 'Unknown'}
41 </p>
42 <p className="text-sm text-foreground-light">
43 Max file size limit:{' '}
44 {maxFileSizeLimit === null ? 'No limit' : `${formatBytes(maxFileSizeLimit)}`}
45 </p>
46 </div>
47
48 <ResourceContent
49 selectedLanguage={language}
50 snippet={DOCS_RESOURCE_CONTENT.uploadFile}
51 codeSnippets={DOCS_RESOURCE_CONTENT.uploadFile.code({
52 name: resource,
53 apikey,
54 endpoint,
55 })}
56 />
57 <ResourceContent
58 selectedLanguage={language}
59 snippet={DOCS_RESOURCE_CONTENT.deleteFiles}
60 codeSnippets={DOCS_RESOURCE_CONTENT.deleteFiles.code({
61 name: resource,
62 apikey,
63 endpoint,
64 })}
65 />
66 <ResourceContent
67 selectedLanguage={language}
68 snippet={DOCS_RESOURCE_CONTENT.listFiles}
69 codeSnippets={DOCS_RESOURCE_CONTENT.listFiles.code({
70 name: resource,
71 apikey,
72 endpoint,
73 })}
74 />
75 <ResourceContent
76 selectedLanguage={language}
77 snippet={DOCS_RESOURCE_CONTENT.downloadFile}
78 codeSnippets={DOCS_RESOURCE_CONTENT.downloadFile.code({
79 name: resource,
80 apikey,
81 endpoint,
82 })}
83 />
84 {bucket.public ? (
85 <ResourceContent
86 selectedLanguage={language}
87 snippet={DOCS_RESOURCE_CONTENT.retrievePublicURL}
88 codeSnippets={DOCS_RESOURCE_CONTENT.retrievePublicURL.code({
89 name: resource,
90 apikey,
91 endpoint,
92 })}
93 />
94 ) : (
95 <ResourceContent
96 selectedLanguage={language}
97 snippet={DOCS_RESOURCE_CONTENT.createSignedURL}
98 codeSnippets={DOCS_RESOURCE_CONTENT.createSignedURL.code({
99 name: resource,
100 apikey,
101 endpoint,
102 })}
103 />
104 )}
105 </div>
106 )
107}