content.tsx63 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: 'App.vue',
32	language: 'html',
33	code: `
34	<script setup>
35	import { ref, onMounted } from 'vue'
36	import { briven } from '../utils/briven'
37
38	const todos = ref([])
39
40	async function getTodos() {
41	const { data } = await briven.from('todos').select()
42	todos.value = data
43	}
44
45	onMounted(() => {
46	getTodos()
47	})
48
49	</script>
50
51	<template>
52	<ul>
53	<li v-for="todo in todos" :key="todo.id">{{ todo.name }}</li>
54	</ul>
55	</template>
56	`,
57	},
58	]
59
60	return <MultipleCodeBlock files={files} />
61	}
62
63	export default ContentFile