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