start-using-keys-banner.tsx29 lines · main

1	import { Import } from 'lucide-react'
2	import { Button } from 'ui'
3
4	import { FeatureBanner } from '@/components/ui/FeatureBanner'
5
6	export const StartUsingJwtSigningKeysBanner = ({
7	onClick,
8	isLoading,
9	}: {
10	onClick: () => void
11	isLoading: boolean
12	}) => {
13	return (
14	<FeatureBanner bgAlt>
15	<div className="flex flex-col gap-0 z-2">
16	<p className="text-sm text-foreground">Start using JWT signing keys</p>
17	<p className="text-sm text-foreground-lighter lg:max-w-sm 2xl:max-w-none">
18	Right now your project is using the legacy JWT secret. To start taking advantage of the
19	new JWT signing keys, migrate your project's secret to the new set up.
20	</p>
21	<div className="mt-4">
22	<Button type="primary" icon={<Import />} onClick={onClick} loading={isLoading}>
23	Migrate JWT secret
24	</Button>
25	</div>
26	</div>
27	</FeatureBanner>
28	)
29	}