konnosDashboard
content.tsx101 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',
9 language: 'bash',
10 code: `
11REACT_APP_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}
12REACT_APP_BRIVEN_KEY=${projectKeys.publishableKey ?? '<prefer publishable key instead of anon key for mobile or desktop apps>'}
13 `,
14 },
15 {
16 name: 'src/brivenClient.tsx',
17 language: 'ts',
18 code: `
19import { createClient } from '@supabase/supabase-js'
20
21const brivenUrl = process.env.REACT_APP_BRIVEN_URL
22const brivenAnonKey = process.env.REACT_APP_BRIVEN_KEY
23
24export const briven = createClient(brivenUrl, brivenAnonKey)
25`,
26 },
27 {
28 name: 'src/App.tsx',
29 language: 'ts',
30 code: `
31import React, { useEffect, useState } from 'react';
32import { setupIonicReact, IonApp } from '@ionic/react';
33import {
34 IonContent,
35 IonHeader,
36 IonTitle,
37 IonToolbar,
38 IonList,
39 IonItem,
40} from '@ionic/react';
41
42/* Core CSS required for Ionic components to work properly */
43import '@ionic/react/css/core.css';
44
45/* Theme variables */
46import './theme/variables.css';
47
48import { briven } from './brivenClient';
49
50setupIonicReact();
51
52export default function App() {
53 const [todos, setTodos] = useState([]);
54 useEffect(() => {
55 getTodos();
56 }, []);
57
58 const getTodos = async () => {
59 try {
60 const { data, error } = await briven.from('todos').select();
61
62 if (error) {
63 console.error('Error fetching todos:', error.message);
64 return;
65 }
66
67 if (data) {
68 setTodos(data);
69 }
70 } catch (error) {
71 console.error('Error fetching todos:', error.message);
72 }
73 };
74
75 return (
76 <IonApp>
77 <>
78 <IonHeader>
79 <IonToolbar>
80 <IonTitle>Todos</IonTitle>
81 </IonToolbar>
82 </IonHeader>
83 <IonContent>
84 <IonList>
85 {todos.map((todo) => (
86 <IonItem key={todo.id}>{todo.name}</IonItem>
87 ))}
88 </IonList>
89 </IonContent>
90 </>
91 </IonApp>
92 );
93}
94`,
95 },
96 ]
97
98 return <MultipleCodeBlock files={files} />
99}
100
101export default ContentFile