content.tsx74 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="src/utils/briven.ts" />
17	<ConnectTabTrigger value="src/routes/index.tsx" />
18	</ConnectTabTriggers>
19
20	<ConnectTabContent value=".env">
21	<SimpleCodeBlock className="bash" parentClassName="min-h-72">
22	{`
23	VITE_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}
24	VITE_BRIVEN_KEY=${projectKeys.publishableKey ?? projectKeys.anonKey ?? 'your-anon-key'}
25	`}
26	</SimpleCodeBlock>
27	</ConnectTabContent>
28
29	<ConnectTabContent value="src/utils/briven.ts">
30	<SimpleCodeBlock className="ts" parentClassName="min-h-72">
31	{`
32	import { createClient } from "@supabase/supabase-js";
33
34	export const briven = createClient(
35	import.meta.env.VITE_BRIVEN_URL,
36	import.meta.env.VITE_BRIVEN_KEY
37	);
38	`}
39	</SimpleCodeBlock>
40	</ConnectTabContent>
41
42	<ConnectTabContent value="src/routes/index.tsx">
43	<SimpleCodeBlock className="tsx" parentClassName="min-h-72">
44	{`
45	import { createFileRoute } from '@tanstack/react-router'
46	import { briven } from '../utils/briven'
47
48	export const Route = createFileRoute('/')({
49	loader: async () => {
50	const { data: todos } = await briven.from('todos').select()
51	return { todos }
52	},
53	component: Home,
54	})
55
56	function Home() {
57	const { todos } = Route.useLoaderData()
58
59	return (
60	<ul>
61	{todos?.map((todo) => (
62	<li key={todo.id}>{todo.name}</li>
63	))}
64	</ul>
65	)
66	}
67	`}
68	</SimpleCodeBlock>
69	</ConnectTabContent>
70	</ConnectTabs>
71	)
72	}
73
74	export default ContentFile