APIKeysLayout.tsx39 lines · main

1	import { useParams } from 'common'
2	import { PropsWithChildren } from 'react'
3
4	import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
5	import { ScaffoldContainer } from '@/components/layouts/Scaffold'
6	import { DocsButton } from '@/components/ui/DocsButton'
7	import { DOCS_URL } from '@/lib/constants'
8
9	const ApiKeysLayout = ({ children }: PropsWithChildren) => {
10	const { ref: projectRef } = useParams()
11
12	const navigationItems = [
13	{
14	label: 'publishable and secret api keys',
15	href: `/project/${projectRef}/settings/api-keys`,
16	id: 'new-keys',
17	},
18	{
19	label: 'legacy anon, service_role api keys',
20	href: `/project/${projectRef}/settings/api-keys/legacy`,
21	id: 'legacy-keys',
22	},
23	]
24
25	return (
26	<PageLayout
27	title="api keys"
28	subtitle="configure api keys to securely control access to your project"
29	navigationItems={navigationItems}
30	secondaryActions={<DocsButton href={`${DOCS_URL}/guides/api/api-keys`} />}
31	>
32	<ScaffoldContainer className="flex flex-col py-8 gap-8" bottomPadding>
33	{children}
34	</ScaffoldContainer>
35	</PageLayout>
36	)
37	}
38
39	export default ApiKeysLayout