content.tsx141 lines · main
1import { MultipleCodeBlock } from 'ui-patterns/MultipleCodeBlock'
2
3import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
4
5const ContentFile = ({ projectKeys }: StepContentProps) => {
6 const files = [
7 {
8 name: '.env.local',
9 language: 'bash',
10 code: [
11 `NEXT_PUBLIC_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}`,
12 projectKeys?.publishableKey
13 ? `NEXT_PUBLIC_BRIVEN_PUBLISHABLE_KEY=${projectKeys.publishableKey}`
14 : `NEXT_PUBLIC_BRIVEN_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'}`,
15 '',
16 ].join('\n'),
17 },
18 {
19 name: 'page.tsx',
20 language: 'tsx',
21 code: `
22import { createClient } from '@/utils/briven/server'
23import { cookies } from 'next/headers'
24
25export default async function Page() {
26 const cookieStore = await cookies()
27 const briven = createClient(cookieStore)
28
29 const { data: todos } = await briven.from('todos').select()
30
31 return (
32 <ul>
33 {todos?.map((todo) => (
34 <li key={todo.id}>{todo.name}</li>
35 ))}
36 </ul>
37 )
38}
39`,
40 },
41 {
42 name: 'utils/briven/server.ts',
43 language: 'ts',
44 code: `
45import { createServerClient } from "@supabase/ssr";
46import { cookies } from "next/headers";
47
48const brivenUrl = process.env.NEXT_PUBLIC_BRIVEN_URL;
49const brivenKey = process.env.${projectKeys?.publishableKey ? 'NEXT_PUBLIC_BRIVEN_PUBLISHABLE_KEY' : 'NEXT_PUBLIC_BRIVEN_ANON_KEY'};
50
51export const createClient = (cookieStore: Awaited<ReturnType<typeof cookies>>) => {
52 return createServerClient(
53 brivenUrl!,
54 brivenKey!,
55 {
56 cookies: {
57 getAll() {
58 return cookieStore.getAll()
59 },
60 setAll(cookiesToSet) {
61 try {
62 cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
63 } catch {
64 // The \`setAll\` method was called from a Server Component.
65 // This can be ignored if you have middleware refreshing
66 // user sessions.
67 }
68 },
69 },
70 },
71 );
72};
73`,
74 },
75 {
76 name: 'utils/briven/client.ts',
77 language: 'ts',
78 code: `
79import { createBrowserClient } from "@supabase/ssr";
80
81const brivenUrl = process.env.NEXT_PUBLIC_BRIVEN_URL;
82const brivenKey = process.env.${projectKeys?.publishableKey ? 'NEXT_PUBLIC_BRIVEN_PUBLISHABLE_KEY' : 'NEXT_PUBLIC_BRIVEN_ANON_KEY'};
83
84export const createClient = () =>
85 createBrowserClient(
86 brivenUrl!,
87 brivenKey!,
88 );
89`,
90 },
91 {
92 name: 'utils/briven/middleware.ts',
93 language: 'ts',
94 code: `
95import { createServerClient } from "@supabase/ssr";
96import { type NextRequest, NextResponse } from "next/server";
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 = (request: NextRequest) => {
102 // Create an unmodified response
103 let brivenResponse = NextResponse.next({
104 request: {
105 headers: request.headers,
106 },
107 });
108
109 const briven = createServerClient(
110 brivenUrl!,
111 brivenKey!,
112 {
113 cookies: {
114 getAll() {
115 return request.cookies.getAll()
116 },
117 setAll(cookiesToSet) {
118 cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))
119 brivenResponse = NextResponse.next({
120 request,
121 })
122 cookiesToSet.forEach(({ name, value, options }) =>
123 brivenResponse.cookies.set(name, value, options)
124 )
125 },
126 },
127 },
128 );
129
130 return brivenResponse
131};
132`,
133 },
134 ]
135
136 return <MultipleCodeBlock files={files} />
137}
138
139// [Joshen] Used as a dynamic import
140// eslint-disable-next-line no-restricted-exports
141export default ContentFile