content.tsx75 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.jsx" />
18	</ConnectTabTriggers>
19
20	<ConnectTabContent value=".env.local">
21	<SimpleCodeBlock className="bash" parentClassName="min-h-72">
22	{[
23	'',
24	`BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}`,
25	projectKeys?.publishableKey
26	? `BRIVEN_PUBLISHABLE_KEY=${projectKeys.publishableKey}`
27	: `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.BRIVEN_URL;
39	const brivenKey = process.env.${projectKeys.publishableKey ? 'BRIVEN_PUBLISHABLE_KEY' : 'BRIVEN_ANON_KEY'};
40
41	export const briven = createClient(brivenUrl!, brivenKey!);
42	`}
43	</SimpleCodeBlock>
44	</ConnectTabContent>
45
46	<ConnectTabContent value="src/App.jsx">
47	<SimpleCodeBlock className="jsx" parentClassName="min-h-72">
48	{`
49	import { briven } from '../utils/briven'
50	import { createResource, For } from "solid-js";
51
52	async function getTodos() {
53	const { data: todos } = await briven.from("todos").select();
54	return data;
55	}
56
57	function App() {
58	const [todos] = createResource(getTodos);
59
60	return (
61	<ul>
62	<For each={todos()}>{(country) => <li>{todo.name}</li>}</For>
63	</ul>
64	);
65	}
66
67	export default App;
68	`}
69	</SimpleCodeBlock>
70	</ConnectTabContent>
71	</ConnectTabs>
72	)
73	}
74
75	export default ContentFile