konnosDashboard
content.tsx102 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="utils/briven.ts" />
17 <ConnectTabTrigger value="App.tsx" />
18 </ConnectTabTriggers>
19
20 <ConnectTabContent value=".env.local">
21 <SimpleCodeBlock className="bash" parentClassName="min-h-72">
22 {`
23EXPO_PUBLIC_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}
24EXPO_PUBLIC_BRIVEN_KEY=${projectKeys.publishableKey ?? '<prefer publishable key instead of anon key for mobile and desktop apps>'}
25 `}
26 </SimpleCodeBlock>
27 </ConnectTabContent>
28
29 <ConnectTabContent value="utils/briven.ts">
30 <SimpleCodeBlock className="ts" parentClassName="min-h-72">
31 {`
32import 'react-native-url-polyfill/auto'
33import AsyncStorage from '@react-native-async-storage/async-storage'
34import { createClient, processLock } from '@supabase/supabase-js'
35
36export const briven = createClient(
37 process.env.EXPO_PUBLIC_BRIVEN_URL!,
38 process.env.EXPO_PUBLIC_BRIVEN_KEY!,
39 {
40 auth: {
41 storage: AsyncStorage,
42 autoRefreshToken: true,
43 persistSession: true,
44 detectSessionInUrl: false,
45 lock: processLock,
46 },
47 })
48 `}
49 </SimpleCodeBlock>
50 </ConnectTabContent>
51
52 <ConnectTabContent value="App.tsx">
53 <SimpleCodeBlock className="tsx" parentClassName="min-h-72">
54 {`
55import React, { useState, useEffect } from 'react';
56import { View, Text, FlatList } from 'react-native';
57import { briven } from '../utils/briven';
58
59export default function App() {
60 const [todos, setTodos] = useState([]);
61
62 useEffect(() => {
63 const getTodos = async () => {
64 try {
65 const { data: todos, error } = await briven.from('todos').select();
66
67 if (error) {
68 console.error('Error fetching todos:', error.message);
69 return;
70 }
71
72 if (todos && todos.length > 0) {
73 setTodos(todos);
74 }
75 } catch (error) {
76 console.error('Error fetching todos:', error.message);
77 }
78 };
79
80 getTodos();
81 }, []);
82
83 return (
84 <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
85 <Text>Todo List</Text>
86 <FlatList
87 data={todos}
88 keyExtractor={(item) => item.id.toString()}
89 renderItem={({ item }) => <Text key={item.id}>{item.title}</Text>}
90 />
91 </View>
92 );
93};
94
95`}
96 </SimpleCodeBlock>
97 </ConnectTabContent>
98 </ConnectTabs>
99 )
100}
101
102export default ContentFile