MigrationsEmptyState.tsx64 lines · main

1	import { useParams } from 'common'
2	import { Terminal } from 'lucide-react'
3	import { Card, CardContent, CardHeader, CardTitle } from 'ui'
4	import { EmptyStatePresentational } from 'ui-patterns'
5
6	import CommandRender from '@/components/interfaces/Functions/CommandRender'
7
8	export const MigrationsEmptyState = () => {
9	const { ref } = useParams()
10
11	const commands = [
12	{
13	comment: 'Link your project',
14	command: `briven link --project-ref ${ref}`,
15	jsx: () => {
16	return (
17	<>
18	<span className="text-brand-600">briven</span> link --project-ref {ref}
19	</>
20	)
21	},
22	},
23	{
24	comment: 'Create a new migration called "new-migration"',
25	command: `briven migration new new-migration`,
26	jsx: () => {
27	return (
28	<>
29	<span className="text-brand-600">briven</span> migration new new-migration
30	</>
31	)
32	},
33	},
34	{
35	comment: 'Run all migrations for this project',
36	command: `briven db push`,
37	jsx: () => {
38	return (
39	<>
40	<span className="text-brand-600">briven</span> db push
41	</>
42	)
43	},
44	},
45	]
46
47	return (
48	<EmptyStatePresentational
49	icon={Terminal}
50	title="Run your first migration"
51	description="Create and run your first migration using the Briven CLI."
52	className="gap-y-6"
53	>
54	<Card>
55	<CardHeader>
56	<CardTitle>Terminal instructions</CardTitle>
57	</CardHeader>
58	<CardContent>
59	<CommandRender commands={commands} />
60	</CardContent>
61	</Card>
62	</EmptyStatePresentational>
63	)
64	}