content.tsx67 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.local',
9	language: 'bash',
10	code: [
11	`NEXT_PUBLIC_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}`,
12	projectKeys?.publishableKey
13	? `NEXT_PUBLIC_BRIVEN_PUBLISHABLE_KEY=${projectKeys.publishableKey}`
14	: `NEXT_PUBLIC_BRIVEN_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'}`,
15	'',
16	].join('\n'),
17	},
18	{
19	name: 'utils/briven.ts',
20	language: 'ts',
21	code: `
22	import { createClient } from "@supabase/supabase-js";
23
24	const brivenUrl = process.env.NEXT_PUBLIC_BRIVEN_URL!;
25	const brivenKey = process.env.${projectKeys?.publishableKey ? 'NEXT_PUBLIC_BRIVEN_PUBLISHABLE_KEY' : 'NEXT_PUBLIC_BRIVEN_ANON_KEY'}!;
26
27	export const briven = createClient(brivenUrl, brivenKey);
28	`,
29	},
30	{
31	name: 'pages/index.tsx',
32	language: 'tsx',
33	code: `
34	import { useState, useEffect } from 'react'
35	import { briven } from '../utils/briven'
36
37	export default function Page() {
38	const [todos, setTodos] = useState([])
39
40	useEffect(() => {
41	async function getTodos() {
42	const { data: todos } = await briven.from('todos').select()
43
44	if (todos) {
45	setTodos(todos)
46	}
47	}
48
49	getTodos()
50	}, [])
51
52	return (
53	<ul>
54	{todos.map((todo) => (
55	<li key={todo.id}>{todo.name}</li>
56	))}
57	</ul>
58	)
59	}
60	`,
61	},
62	]
63
64	return <MultipleCodeBlock files={files} />
65	}
66
67	export default ContentFile