NewTokenButton.tsx67 lines · main

1	import { ChevronDown } from 'lucide-react'
2	import { useState } from 'react'
3	import {
4	Button,
5	DropdownMenu,
6	DropdownMenuContent,
7	DropdownMenuItem,
8	DropdownMenuTrigger,
9	} from 'ui'
10
11	import { NewTokenDialog } from './NewTokenDialog'
12	import { type NewAccessToken } from '@/data/access-tokens/access-tokens-create-mutation'
13
14	export interface NewAccessTokenButtonProps {
15	onCreateToken: (token: NewAccessToken) => void
16	}
17
18	export const NewTokenButton = ({ onCreateToken }: NewAccessTokenButtonProps) => {
19	const [visible, setVisible] = useState(false)
20	const [tokenScope, setTokenScope] = useState<'V0' | undefined>(undefined)
21
22	return (
23	<>
24	<div className="flex items-center">
25	<Button
26	className="rounded-r-none px-3"
27	onClick={() => {
28	setTokenScope(undefined)
29	setVisible(true)
30	}}
31	>
32	Generate new token
33	</Button>
34	<DropdownMenu>
35	<DropdownMenuTrigger asChild>
36	<Button
37	type="primary"
38	title="Choose token scope"
39	className="rounded-l-none px-[4px] py-[5px]"
40	icon={<ChevronDown />}
41	/>
42	</DropdownMenuTrigger>
43	<DropdownMenuContent align="end" side="bottom">
44	<DropdownMenuItem
45	key="experimental-token"
46	onClick={() => {
47	setTokenScope('V0')
48	setVisible(true)
49	}}
50	>
51	<div className="space-y-1">
52	<p className="block text-foreground">Generate token for experimental API</p>
53	</div>
54	</DropdownMenuItem>
55	</DropdownMenuContent>
56	</DropdownMenu>
57	</div>
58
59	<NewTokenDialog
60	open={visible}
61	onOpenChange={setVisible}
62	tokenScope={tokenScope}
63	onCreateToken={onCreateToken}
64	/>
65	</>
66	)
67	}