content.tsx67 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="src/db/briven.js" />
17	<ConnectTabTrigger value="src/pages/index.astro" />
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="src/db/briven.js">
30	<SimpleCodeBlock className="js" parentClassName="min-h-72">
31	{`
32	import { createClient } from "@supabase/supabase-js";
33
34	const brivenUrl = import.meta.env.BRIVEN_URL;
35	const brivenKey = import.meta.env.BRIVEN_KEY;
36
37	export const briven = createClient(brivenUrl, brivenKey);
38	`}
39	</SimpleCodeBlock>
40	</ConnectTabContent>
41
42	<ConnectTabContent value="src/pages/index.astro">
43	<SimpleCodeBlock className="html" parentClassName="min-h-72">
44	{`
45	---
46	import { briven } from '../db/briven';
47
48	const { data, error } = await briven.from("todos").select('*');
49	---
50
51	{
52	(
53	<ul>
54	{data.map((entry) => (
55	<li>{entry.name}</li>
56	))}
57	</ul>
58	)
59	}
60	`}
61	</SimpleCodeBlock>
62	</ConnectTabContent>
63	</ConnectTabs>
64	)
65	}
66
67	export default ContentFile