konnosDashboard
content.tsx82 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="src/lib/brivenClient.js" />
17 <ConnectTabTrigger value="src/routes/+page.server.js" />
18 <ConnectTabTrigger value="src/routes/+page.svelte" />
19 </ConnectTabTriggers>
20
21 <ConnectTabContent value=".env.local">
22 <SimpleCodeBlock className="bash" parentClassName="min-h-72">
23 {[
24 '',
25 `PUBLIC_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}`,
26 projectKeys?.publishableKey
27 ? `PUBLIC_BRIVEN_PUBLISHABLE_KEY=${projectKeys.publishableKey}`
28 : `PUBLIC_BRIVEN_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'}`,
29 '',
30 ].join('\n')}
31 </SimpleCodeBlock>
32 </ConnectTabContent>
33
34 <ConnectTabContent value="src/lib/brivenClient.js">
35 <SimpleCodeBlock className="js" parentClassName="min-h-72">
36 {`
37import { createClient } from "@supabase/supabase-js";
38import { PUBLIC_BRIVEN_URL, ${projectKeys.publishableKey ? 'PUBLIC_BRIVEN_PUBLISHABLE_KEY' : 'PUBLIC_BRIVEN_ANON_KEY'} } from "$env/static/public"
39
40const brivenUrl = PUBLIC_BRIVEN_URL;
41const brivenKey = ${projectKeys.publishableKey ? 'PUBLIC_BRIVEN_PUBLISHABLE_KEY' : 'PUBLIC_BRIVEN_ANON_KEY'};
42
43export const briven = createClient(brivenUrl, brivenKey);
44 `}
45 </SimpleCodeBlock>
46 </ConnectTabContent>
47
48 <ConnectTabContent value="src/routes/+page.server.js">
49 <SimpleCodeBlock className="js" parentClassName="min-h-72">
50 {`
51import { briven } from "$lib/brivenClient";
52
53export async function load() {
54 const { data } = await briven.from("countries").select();
55 return {
56 countries: data ?? [],
57 };
58}
59`}
60 </SimpleCodeBlock>
61 </ConnectTabContent>
62
63 <ConnectTabContent value="src/routes/+page.svelte">
64 <SimpleCodeBlock className="html" parentClassName="min-h-72">
65 {`
66<script>
67 export let data;
68</script>
69
70<ul>
71 {#each data.countries as country}
72 <li>{country.name}</li>
73 {/each}
74</ul>
75`}
76 </SimpleCodeBlock>
77 </ConnectTabContent>
78 </ConnectTabs>
79 )
80}
81
82export default ContentFile