tokens.tsx75 lines · main

1	import { ExternalLink, Search } from 'lucide-react'
2	import { useState } from 'react'
3	import { Button } from 'ui'
4	import { Input } from 'ui-patterns/DataInputs/Input'
5
6	import { AccessTokenList } from '@/components/interfaces/Account/AccessTokens/AccessTokenList'
7	import { AccessTokenNewBanner } from '@/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/AccessTokenNewBanner'
8	import { NewTokenButton } from '@/components/interfaces/Account/AccessTokens/Classic/NewTokenButton'
9	import { AccessTokensLayout } from '@/components/layouts/AccessTokens/AccessTokensLayout'
10	import AccountLayout from '@/components/layouts/AccountLayout/AccountLayout'
11	import { AppLayout } from '@/components/layouts/AppLayout/AppLayout'
12	import { DefaultLayout } from '@/components/layouts/DefaultLayout'
13	import { NewAccessToken } from '@/data/access-tokens/access-tokens-create-mutation'
14	import { DOCS_URL } from '@/lib/constants'
15	import type { NextPageWithLayout } from '@/types'
16
17	const UserAccessTokens: NextPageWithLayout = () => {
18	const [newToken, setNewToken] = useState<NewAccessToken | undefined>()
19	const [searchString, setSearchString] = useState('')
20
21	return (
22	<AccessTokensLayout>
23	<div className="space-y-4">
24	{newToken && (
25	<AccessTokenNewBanner
26	token={newToken}
27	onClose={() => setNewToken(undefined)}
28	getTokenValue={(token) => token.token}
29	/>
30	)}
31	<div className="flex items-center justify-between gap-x-2 mb-3">
32	<Input
33	size="tiny"
34	autoComplete="off"
35	icon={<Search size={12} />}
36	value={searchString}
37	onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchString(e.target.value)}
38	name="search"
39	id="search"
40	placeholder="Filter tokens"
41	/>
42	<div className="flex items-center gap-x-2">
43	<Button asChild type="default" icon={<ExternalLink />}>
44	<a href={`${DOCS_URL}/reference/api/introduction`} target="_blank" rel="noreferrer">
45	API Docs
46	</a>
47	</Button>
48	<Button asChild type="default" icon={<ExternalLink />}>
49	<a href={`${DOCS_URL}/reference/cli/start`} target="_blank" rel="noreferrer">
50	CLI docs
51	</a>
52	</Button>
53	<NewTokenButton onCreateToken={setNewToken} />
54	</div>
55	</div>
56	<AccessTokenList
57	searchString={searchString}
58	onDeleteSuccess={(id) => {
59	if (id === newToken?.id) setNewToken(undefined)
60	}}
61	/>
62	</div>
63	</AccessTokensLayout>
64	)
65	}
66
67	UserAccessTokens.getLayout = (page) => (
68	<AppLayout>
69	<DefaultLayout headerTitle="Account">
70	<AccountLayout title="Access Tokens">{page}</AccountLayout>
71	</DefaultLayout>
72	</AppLayout>
73	)
74
75	export default UserAccessTokens