AccessTokensLayout.tsx69 lines · main

1	import { useFlag } from 'common'
2	import Link from 'next/link'
3	import { useRouter } from 'next/router'
4	import { PropsWithChildren } from 'react'
5	import { NavMenu, NavMenuItem } from 'ui'
6	import { PageContainer } from 'ui-patterns/PageContainer'
7	import {
8	PageHeader,
9	PageHeaderDescription,
10	PageHeaderMeta,
11	PageHeaderNavigationTabs,
12	PageHeaderSummary,
13	PageHeaderTitle,
14	} from 'ui-patterns/PageHeader'
15
16	export const AccessTokensLayout = ({ children }: PropsWithChildren) => {
17	const router = useRouter()
18	const scopedTokensEnabled = useFlag('scopedPAT')
19
20	const navigationItems = [
21	{
22	label: 'Classic Tokens',
23	href: `/account/tokens`,
24	id: 'classic-tokens',
25	},
26	...(scopedTokensEnabled
27	? [
28	{
29	label: 'Scoped Tokens',
30	href: `/account/tokens/scoped`,
31	id: 'scoped-tokens',
32	},
33	]
34	: []),
35	]
36
37	const title = 'Access Tokens'
38	const description = 'Create and manage access tokens for API authentication.'
39
40	return (
41	<>
42	<PageHeader size="small">
43	<PageHeaderMeta>
44	<PageHeaderSummary>
45	<PageHeaderTitle>{title}</PageHeaderTitle>
46	<PageHeaderDescription>{description}</PageHeaderDescription>
47	</PageHeaderSummary>
48	</PageHeaderMeta>
49	{navigationItems.length > 0 && (
50	<PageHeaderNavigationTabs>
51	<NavMenu>
52	{navigationItems.map((item) => {
53	const isActive = router.asPath.split('?')[0] === item.href
54	return (
55	<NavMenuItem key={item.label} active={isActive}>
56	<Link href={item.href}>{item.label}</Link>
57	</NavMenuItem>
58	)
59	})}
60	</NavMenu>
61	</PageHeaderNavigationTabs>
62	)}
63	</PageHeader>
64	<PageContainer size="small" className="pt-8 pb-16">
65	{children}
66	</PageContainer>
67	</>
68	)
69	}