content.tsx60 lines · main

1	import { MultipleCodeBlock } from 'ui-patterns/MultipleCodeBlock'
2
3	import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
4
5	const ContentFile = ({ projectKeys }: StepContentProps) => {
6	const files = [
7	{
8	name: '.env',
9	language: 'bash',
10	code: `
11	VITE_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}
12	VITE_BRIVEN_KEY=${projectKeys.publishableKey ?? projectKeys.anonKey ?? 'your-anon-key'}
13	`,
14	},
15	{
16	name: 'src/utils/briven.ts',
17	language: 'ts',
18	code: `
19	import { createClient } from "@supabase/supabase-js";
20
21	export const briven = createClient(
22	import.meta.env.VITE_BRIVEN_URL,
23	import.meta.env.VITE_BRIVEN_KEY
24	);
25	`,
26	},
27	{
28	name: 'src/routes/index.tsx',
29	language: 'tsx',
30	code: `
31	import { createFileRoute } from '@tanstack/react-router'
32	import { briven } from '../utils/briven'
33
34	export const Route = createFileRoute('/')({
35	loader: async () => {
36	const { data: todos } = await briven.from('todos').select()
37	return { todos }
38	},
39	component: Home,
40	})
41
42	function Home() {
43	const { todos } = Route.useLoaderData()
44
45	return (
46	<ul>
47	{todos?.map((todo) => (
48	<li key={todo.id}>{todo.name}</li>
49	))}
50	</ul>
51	)
52	}
53	`,
54	},
55	]
56
57	return <MultipleCodeBlock files={files} />
58	}
59
60	export default ContentFile