konnosDashboard
content.tsx65 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 `PUBLIC_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}`,
12 projectKeys?.publishableKey
13 ? `PUBLIC_BRIVEN_PUBLISHABLE_KEY=${projectKeys.publishableKey}`
14 : `PUBLIC_BRIVEN_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'}`,
15 '',
16 ].join('\n'),
17 },
18 {
19 name: 'src/lib/brivenClient.js',
20 language: 'js',
21 code: `
22import { createClient } from "@supabase/supabase-js";
23import { PUBLIC_BRIVEN_URL, ${projectKeys.publishableKey ? 'PUBLIC_BRIVEN_PUBLISHABLE_KEY' : 'PUBLIC_BRIVEN_ANON_KEY'} } from "$env/static/public"
24
25const brivenUrl = PUBLIC_BRIVEN_URL;
26const brivenKey = ${projectKeys.publishableKey ? 'PUBLIC_BRIVEN_PUBLISHABLE_KEY' : 'PUBLIC_BRIVEN_ANON_KEY'};
27
28export const briven = createClient(brivenUrl, brivenKey);
29 `,
30 },
31 {
32 name: 'src/routes/+page.server.js',
33 language: 'js',
34 code: `
35import { briven } from "$lib/brivenClient";
36
37export async function load() {
38 const { data } = await briven.from("countries").select();
39 return {
40 countries: data ?? [],
41 };
42}
43`,
44 },
45 {
46 name: 'src/routes/+page.svelte',
47 language: 'html',
48 code: `
49<script>
50 export let data;
51</script>
52
53<ul>
54 {#each data.countries as country}
55 <li>{country.name}</li>
56 {/each}
57</ul>
58`,
59 },
60 ]
61
62 return <MultipleCodeBlock files={files} />
63}
64
65export default ContentFile