content.tsx85 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" />
16	<ConnectTabTrigger value="utils/briven.ts" />
17	<ConnectTabTrigger value="App.tsx" />
18	</ConnectTabTriggers>
19
20	<ConnectTabContent value=".env">
21	<SimpleCodeBlock className="bash" parentClassName="min-h-72">
22	{[
23	'',
24	`VITE_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}`,
25	projectKeys?.publishableKey
26	? `VITE_BRIVEN_PUBLISHABLE_KEY=${projectKeys.publishableKey}`
27	: `VITE_BRIVEN_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'}`,
28	'',
29	].join('\n')}
30	</SimpleCodeBlock>
31	</ConnectTabContent>
32
33	<ConnectTabContent value="utils/briven.ts">
34	<SimpleCodeBlock className="ts" parentClassName="min-h-72">
35	{`
36	import { createClient } from '@supabase/supabase-js';
37
38	const brivenUrl = import.meta.env.VITE_BRIVEN_URL;
39	const brivenKey = import.meta.env.${projectKeys.publishableKey ? 'VITE_BRIVEN_PUBLISHABLE_KEY' : 'VITE_BRIVEN_ANON_KEY'};
40
41	const briven = createClient(brivenUrl, brivenKey);
42
43	export default briven
44	`}
45	</SimpleCodeBlock>
46	</ConnectTabContent>
47
48	<ConnectTabContent value="App.tsx">
49	<SimpleCodeBlock className="tsx" parentClassName="min-h-72">
50	{`
51	import { useState, useEffect } from 'react'
52	import { briven } from '../utils/briven'
53
54	function Page() {
55	const [todos, setTodos] = useState([])
56
57	useEffect(() => {
58	function getTodos() {
59	const { data: todos } = await briven.from('todos').select()
60
61	if (todos.length > 1) {
62	setTodos(todos)
63	}
64	}
65
66	getTodos()
67	}, [])
68
69	return (
70	<div>
71	{todos.map((todo) => (
72	<li key={todo}>{todo}</li>
73	))}
74	</div>
75	)
76	}
77	export default Page
78	`}
79	</SimpleCodeBlock>
80	</ConnectTabContent>
81	</ConnectTabs>
82	)
83	}
84
85	export default ContentFile