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