content.tsx72 lines · main

1	import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
2
3	import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
4	import {
5	ConnectTabContent,
6	ConnectTabs,
7	ConnectTabTrigger,
8	ConnectTabTriggers,
9	} from '@/components/interfaces/Connect/ConnectTabs'
10
11	const ContentFile = ({ projectKeys }: ContentFileProps) => {
12	return (
13	<ConnectTabs>
14	<ConnectTabTriggers>
15	<ConnectTabTrigger value=".env.local" />
16	<ConnectTabTrigger value="utils/briven.ts" />
17	<ConnectTabTrigger value="src/App.vue" />
18	</ConnectTabTriggers>
19
20	<ConnectTabContent value=".env.local">
21	<SimpleCodeBlock className="bash" parentClassName="min-h-72">
22	{`
23	BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}
24	BRIVEN_KEY=${projectKeys.publishableKey ?? projectKeys.anonKey ?? 'your-anon-key'}
25	`}
26	</SimpleCodeBlock>
27	</ConnectTabContent>
28
29	<ConnectTabContent value="utils/briven.ts">
30	<SimpleCodeBlock className="ts" parentClassName="min-h-72">
31	{`
32	import { createClient } from "@supabase/supabase-js";
33
34	const brivenUrl = process.env.BRIVEN_URL;
35	const brivenKey = process.env.BRIVEN_KEY;
36
37	export const briven = createClient(brivenUrl, brivenKey);
38	`}
39	</SimpleCodeBlock>
40	</ConnectTabContent>
41
42	<ConnectTabContent value="src/App.vue">
43	<SimpleCodeBlock className="jsx" parentClassName="min-h-72">
44	{`
45	<script setup>
46	import { briven } from '../utils/briven'
47	const todos = ref([])
48
49	async function getTodos() {
50	const { data } = await briven.from('todos').select()
51	todos.value = data
52	}
53
54	onMounted(() => {
55	getTodos()
56	})
57
58	</script>
59
60	<template>
61	<ul>
62	<li v-for="todo in todos" :key="todo.id">{{ todo.name }}</li>
63	</ul>
64	</template>
65	`}
66	</SimpleCodeBlock>
67	</ConnectTabContent>
68	</ConnectTabs>
69	)
70	}
71
72	export default ContentFile