konnosDashboard
StorageBucketsLayout.tsx85 lines · main
1import { IS_PLATFORM, useParams } from 'common'
2import Link from 'next/link'
3import { usePathname } from 'next/navigation'
4import { PropsWithChildren } from 'react'
5import { NavMenu, NavMenuItem } from 'ui'
6import {
7 PageHeader,
8 PageHeaderAside,
9 PageHeaderDescription,
10 PageHeaderMeta,
11 PageHeaderNavigationTabs,
12 PageHeaderSummary,
13 PageHeaderTitle,
14} from 'ui-patterns/PageHeader'
15
16import { BUCKET_TYPES } from '@/components/interfaces/Storage/Storage.constants'
17import { useStorageV2Page } from '@/components/interfaces/Storage/Storage.utils'
18import { DocsButton } from '@/components/ui/DocsButton'
19
20export const StorageBucketsLayout = ({
21 title,
22 hideSubtitle = false,
23 children,
24}: PropsWithChildren<{ title?: string; hideSubtitle?: boolean }>) => {
25 const { ref } = useParams()
26 const pathname = usePathname()
27 const page = useStorageV2Page()
28 const config = !!page && page !== 's3' ? BUCKET_TYPES[page] : undefined
29
30 const navigationItems =
31 page === 'files'
32 ? [
33 {
34 label: 'Buckets',
35 href: `/project/${ref}/storage/files`,
36 },
37 ...(IS_PLATFORM
38 ? [
39 {
40 label: 'Settings',
41 href: `/project/${ref}/storage/files/settings`,
42 },
43 ]
44 : []),
45 {
46 label: 'Policies',
47 href: `/project/${ref}/storage/files/policies`,
48 },
49 ]
50 : []
51
52 return (
53 <>
54 <PageHeader>
55 <PageHeaderMeta>
56 <PageHeaderSummary>
57 <PageHeaderTitle>{title || (config?.displayName ?? 'Storage')}</PageHeaderTitle>
58 {!hideSubtitle && (
59 <PageHeaderDescription>
60 {config?.description || 'Manage your storage buckets and files.'}
61 </PageHeaderDescription>
62 )}
63 </PageHeaderSummary>
64
65 <PageHeaderAside>
66 {config?.docsUrl && <DocsButton key="docs" href={config.docsUrl} />}
67 </PageHeaderAside>
68 </PageHeaderMeta>
69
70 {navigationItems.length > 0 && (
71 <PageHeaderNavigationTabs>
72 <NavMenu>
73 {navigationItems.map((item) => (
74 <NavMenuItem key={item.label} active={pathname === item.href}>
75 <Link href={item.href}>{item.label}</Link>
76 </NavMenuItem>
77 ))}
78 </NavMenu>
79 </PageHeaderNavigationTabs>
80 )}
81 </PageHeader>
82 {children}
83 </>
84 )
85}