content.tsx65 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	`BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}`,
12	`BRIVEN_KEY=${projectKeys.publishableKey ?? projectKeys.anonKey ?? 'your-anon-key'}`,
13	'',
14	].join('\n'),
15	},
16	{
17	name: 'nuxt.config.ts',
18	language: 'ts',
19	code: `
20	export default defineNuxtConfig({
21	runtimeConfig: {
22	public: {
23	brivenUrl: process.env.BRIVEN_URL,
24	brivenKey: process.env.BRIVEN_KEY,
25	},
26	},
27	})
28	`,
29	},
30	{
31	name: 'app.vue',
32	language: 'html',
33	code: `
34	<script setup>
35	import { ref, onMounted } from 'vue'
36	import { createClient } from '@supabase/supabase-js'
37
38	const config = useRuntimeConfig()
39	const briven = createClient(config.public.brivenUrl, config.public.brivenKey)
40
41	const todos = ref([])
42
43	async function getTodos() {
44	const { data } = await briven.from('todos').select()
45	todos.value = data
46	}
47
48	onMounted(() => {
49	getTodos()
50	})
51	</script>
52
53	<template>
54	<ul>
55	<li v-for="todo in todos" :key="todo.id">{{ todo.name }}</li>
56	</ul>
57	</template>
58	`,
59	},
60	]
61
62	return <MultipleCodeBlock files={files} />
63	}
64
65	export default ContentFile