content.tsx 3.8 KB

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