content.tsx91 lines · main

1	import { MultipleCodeBlock } from 'ui-patterns/MultipleCodeBlock'
2
3	import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
4
5	const ContentFile = ({ projectKeys }: StepContentProps) => {
6	const files = [
7	{
8	name: '.env',
9	language: 'bash',
10	code: [
11	`VITE_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}`,
12	projectKeys?.publishableKey
13	? `VITE_BRIVEN_PUBLISHABLE_KEY=${projectKeys.publishableKey}`
14	: `VITE_BRIVEN_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'}`,
15	'',
16	].join('\n'),
17	},
18	{
19	name: 'app/utils/briven.server.ts',
20	language: 'ts',
21	code: `
22	import {
23	createServerClient,
24	parseCookieHeader,
25	serializeCookieHeader,
26	} from "@supabase/ssr";
27
28	export function createClient(request: Request) {
29	const headers = new Headers();
30
31	const briven = createServerClient(
32	process.env.VITE_BRIVEN_URL!,
33	process.env.VITE_${projectKeys.publishableKey ? 'BRIVEN_PUBLISHABLE_KEY' : 'BRIVEN_ANON_KEY'},
34	{
35	cookies: {
36	getAll() {
37	return parseCookieHeader(request.headers.get("Cookie") ?? "") as {
38	name: string;
39	value: string;
40	}[];
41	},
42	setAll(cookiesToSet) {
43	cookiesToSet.forEach(({ name, value, options }) =>
44	headers.append(
45	"Set-Cookie",
46	serializeCookieHeader(name, value, options)
47	)
48	);
49	},
50	},
51	}
52	);
53
54	return { briven, headers };
55	}
56	`,
57	},
58	{
59	name: 'app/routes/_index.tsx',
60	language: 'tsx',
61	code: `
62	import type { Route } from "./+types/home";
63	import { createClient } from "~/utils/briven.server";
64
65	export async function loader({ request }: Route.LoaderArgs) {
66	const { briven } = createClient(request);
67	const { data: todos } = await briven.from("todos").select();
68
69	return { todos };
70	}
71
72	export default function Home({ loaderData }: Route.ComponentProps) {
73	return (
74	<>
75	<ul>
76	{loaderData.todos?.map((todo) => (
77	<li key={todo.id}>{todo.name}</li>
78	))}
79	</ul>
80	</>
81	);
82	}
83
84	`,
85	},
86	]
87
88	return <MultipleCodeBlock files={files} />
89	}
90
91	export default ContentFile