EdgeFunctionsLayout.tsx75 lines · main

1	import { useParams } from 'common'
2	import { useRouter } from 'next/router'
3	import { useMemo, type ComponentProps, type PropsWithChildren } from 'react'
4
5	import { ProjectLayout } from '../ProjectLayout'
6	import { ProductMenu } from '@/components/ui/ProductMenu'
7	import type { ProductMenuGroup } from '@/components/ui/ProductMenu/ProductMenu.types'
8	import { ProductMenuShortcuts } from '@/components/ui/ProductMenu/ProductMenuShortcuts'
9	import { withAuth } from '@/hooks/misc/withAuth'
10	import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
11
12	const useGenerateEdgeFunctionsMenu = (): ProductMenuGroup[] => {
13	const { ref: projectRef = 'default' } = useParams()
14
15	return useMemo(
16	() => [
17	{
18	title: 'Manage',
19	items: [
20	{
21	name: 'Functions',
22	key: 'main',
23	pages: ['', '[functionSlug]', 'new'],
24	url: `/project/${projectRef}/functions`,
25	items: [],
26	shortcutId: SHORTCUT_IDS.NAV_FUNCTIONS_OVERVIEW,
27	},
28	{
29	name: 'Secrets',
30	key: 'secrets',
31	url: `/project/${projectRef}/functions/secrets`,
32	items: [],
33	shortcutId: SHORTCUT_IDS.NAV_FUNCTIONS_SECRETS,
34	},
35	],
36	},
37	],
38	[projectRef]
39	)
40	}
41
42	export const EdgeFunctionsProductMenu = () => {
43	const router = useRouter()
44	const page = router.pathname.split('/')[4]
45	const menu = useGenerateEdgeFunctionsMenu()
46
47	return <ProductMenu page={page} menu={menu} />
48	}
49
50	interface EdgeFunctionsLayoutProps {
51	title: string
52	browserTitle?: ComponentProps<typeof ProjectLayout>['browserTitle']
53	}
54
55	const EdgeFunctionsLayout = ({
56	children,
57	title,
58	browserTitle,
59	}: PropsWithChildren<EdgeFunctionsLayoutProps>) => {
60	const menu = useGenerateEdgeFunctionsMenu()
61
62	return (
63	<ProjectLayout
64	product="Edge Functions"
65	browserTitle={{ ...browserTitle, section: title }}
66	productMenu={<EdgeFunctionsProductMenu />}
67	isBlocking={false}
68	>
69	<ProductMenuShortcuts menu={menu} />
70	{children}
71	</ProjectLayout>
72	)
73	}
74
75	export default withAuth(EdgeFunctionsLayout)