content.tsx84 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="_app.tsx" />
18	</ConnectTabTriggers>
19
20	<ConnectTabContent value=".env.local">
21	<SimpleCodeBlock className="bash" parentClassName="min-h-72">
22	{[
23	'',
24	`NEXT_PUBLIC_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}`,
25	projectKeys?.publishableKey
26	? `NEXT_PUBLIC_BRIVEN_PUBLISHABLE_KEY=${projectKeys.publishableKey}`
27	: `NEXT_PUBLIC_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 = process.env.NEXT_PUBLIC_BRIVEN_URL;
39	const brivenKey = process.env.${projectKeys?.publishableKey ? 'NEXT_PUBLIC_BRIVEN_PUBLISHABLE_KEY' : 'NEXT_PUBLIC_BRIVEN_ANON_KEY'};
40
41	export const briven = createClient(brivenUrl, brivenKey);
42	`}
43	</SimpleCodeBlock>
44	</ConnectTabContent>
45
46	<ConnectTabContent value="_app.tsx">
47	<SimpleCodeBlock className="tsx" parentClassName="min-h-72">
48	{`
49	import { useState, useEffect } from 'react'
50	import { briven } from '../utils/briven'
51
52	function Page() {
53	const [todos, setTodos] = useState([])
54
55	useEffect(() => {
56	async function getTodos() {
57	const { data: todos } = await briven.from('todos').select()
58
59	if (todos.length > 1) {
60	setTodos(todos)
61	}
62	}
63
64	getTodos()
65	}, [])
66
67	return (
68	<div>
69	{todos.map((todo) => (
70	<li key={todo}>{todo}</li>
71	))}
72	</div>
73	)
74	}
75	export default Page
76
77	`}
78	</SimpleCodeBlock>
79	</ConnectTabContent>
80	</ConnectTabs>
81	)
82	}
83
84	export default ContentFile