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.local',
9	language: 'bash',
10	code: [
11	`VITE_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}`,
12	projectKeys?.publishableKey
13	? `VITE_BRIVEN_PUBLISHABLE_KEY=${projectKeys.publishableKey}`
14	: `VITE_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 = import.meta.env.VITE_BRIVEN_URL;
25	const brivenKey = import.meta.env.${projectKeys.publishableKey ? 'VITE_BRIVEN_PUBLISHABLE_KEY' : 'VITE_BRIVEN_ANON_KEY'};
26
27	export const briven = createClient(brivenUrl, brivenKey);
28	`,
29	},
30	{
31	name: 'src/App.tsx',
32	language: 'tsx',
33	code: `
34	import { briven } from '../utils/briven'
35	import { createResource, For } from "solid-js";
36
37	async function getTodos() {
38	const { data: todos } = await briven.from("todos").select();
39	return todos;
40	}
41
42	function App() {
43	const [todos] = createResource(getTodos);
44
45	return (
46	<ul>
47	<For each={todos()}>{(todo) => <li>{todo.name}</li>}</For>
48	</ul>
49	);
50	}
51
52	export default App;
53	`,
54	},
55	]
56
57	return <MultipleCodeBlock files={files} />
58	}
59
60	export default ContentFile