konnosDashboard
content.tsx159 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.local" />
16 <ConnectTabTrigger value="page.tsx" />
17 <ConnectTabTrigger value="utils/briven/server.ts" />
18 <ConnectTabTrigger value="utils/briven/client.ts" />
19 <ConnectTabTrigger value="utils/briven/middleware.ts" />
20 </ConnectTabTriggers>
21
22 <ConnectTabContent value=".env.local">
23 <SimpleCodeBlock className="bash" parentClassName="min-h-72">
24 {[
25 '',
26 `NEXT_PUBLIC_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}`,
27 projectKeys?.publishableKey
28 ? `NEXT_PUBLIC_BRIVEN_PUBLISHABLE_KEY=${projectKeys.publishableKey}`
29 : `NEXT_PUBLIC_BRIVEN_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'}`,
30 '',
31 ].join('\n')}
32 </SimpleCodeBlock>
33 </ConnectTabContent>
34
35 <ConnectTabContent value="page.tsx">
36 <SimpleCodeBlock className="tsx" parentClassName="min-h-72">
37 {`
38import { createClient } from '@/utils/briven/server'
39import { cookies } from 'next/headers'
40
41export default async function Page() {
42 const cookieStore = await cookies()
43 const briven = createClient(cookieStore)
44
45 const { data: todos } = await briven.from('todos').select()
46
47 return (
48 <ul>
49 {todos?.map((todo) => (
50 <li>{todo}</li>
51 ))}
52 </ul>
53 )
54}
55`}
56 </SimpleCodeBlock>
57 </ConnectTabContent>
58
59 <ConnectTabContent value="utils/briven/server.ts">
60 <SimpleCodeBlock className="ts" parentClassName="min-h-72">
61 {`
62import { createServerClient, type CookieOptions } from "@supabase/ssr";
63import { cookies } from "next/headers";
64
65const brivenUrl = process.env.NEXT_PUBLIC_BRIVEN_URL;
66const brivenKey = process.env.${projectKeys?.publishableKey ? 'NEXT_PUBLIC_BRIVEN_PUBLISHABLE_KEY' : 'NEXT_PUBLIC_BRIVEN_ANON_KEY'};
67
68export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
69 return createServerClient(
70 brivenUrl!,
71 brivenKey!,
72 {
73 cookies: {
74 getAll() {
75 return cookieStore.getAll()
76 },
77 setAll(cookiesToSet) {
78 try {
79 cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
80 } catch {
81 // The \`setAll\` method was called from a Server Component.
82 // This can be ignored if you have middleware refreshing
83 // user sessions.
84 }
85 },
86 },
87 },
88 );
89};
90`}
91 </SimpleCodeBlock>
92 </ConnectTabContent>
93 <ConnectTabContent value="utils/briven/client.ts">
94 <SimpleCodeBlock className="ts" parentClassName="min-h-72">
95 {`
96import { createBrowserClient } from "@supabase/ssr";
97
98const brivenUrl = process.env.NEXT_PUBLIC_BRIVEN_URL;
99const brivenKey = process.env.${projectKeys?.publishableKey ? 'NEXT_PUBLIC_BRIVEN_PUBLISHABLE_KEY' : 'NEXT_PUBLIC_BRIVEN_ANON_KEY'};
100
101export const createClient = () =>
102 createBrowserClient(
103 brivenUrl!,
104 brivenKey!,
105 );
106`}
107 </SimpleCodeBlock>
108 </ConnectTabContent>
109
110 <ConnectTabContent value="utils/briven/middleware.ts">
111 <SimpleCodeBlock className="ts" parentClassName="min-h-72">
112 {`
113import { createServerClient, type CookieOptions } from "@supabase/ssr";
114import { type NextRequest, NextResponse } from "next/server";
115
116const brivenUrl = process.env.NEXT_PUBLIC_BRIVEN_URL;
117const brivenKey = process.env.${projectKeys?.publishableKey ? 'NEXT_PUBLIC_BRIVEN_PUBLISHABLE_KEY' : 'NEXT_PUBLIC_BRIVEN_ANON_KEY'};
118
119export const createClient = (request: NextRequest) => {
120 // Create an unmodified response
121 let brivenResponse = NextResponse.next({
122 request: {
123 headers: request.headers,
124 },
125 });
126
127 const briven = createServerClient(
128 brivenUrl!,
129 brivenKey!,
130 {
131 cookies: {
132 getAll() {
133 return request.cookies.getAll()
134 },
135 setAll(cookiesToSet) {
136 cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))
137 brivenResponse = NextResponse.next({
138 request,
139 })
140 cookiesToSet.forEach(({ name, value, options }) =>
141 brivenResponse.cookies.set(name, value, options)
142 )
143 },
144 },
145 },
146 );
147
148 return brivenResponse
149};
150`}
151 </SimpleCodeBlock>
152 </ConnectTabContent>
153 </ConnectTabs>
154 )
155}
156
157// [Joshen] Used as a dynamic import
158// eslint-disable-next-line no-restricted-exports
159export default ContentFile