konnosDashboard
content.tsx86 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: `
11EXPO_PUBLIC_BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}
12EXPO_PUBLIC_BRIVEN_KEY=${projectKeys.publishableKey ?? '<prefer publishable key instead of anon key for mobile and desktop apps>'}
13 `,
14 },
15 {
16 name: 'utils/briven.ts',
17 language: 'ts',
18 code: `
19import AsyncStorage from '@react-native-async-storage/async-storage'
20import { createClient } from '@supabase/supabase-js'
21
22export const briven = createClient(
23 process.env.EXPO_PUBLIC_BRIVEN_URL!,
24 process.env.EXPO_PUBLIC_BRIVEN_KEY!,
25 {
26 auth: {
27 storage: AsyncStorage,
28 autoRefreshToken: true,
29 persistSession: true,
30 detectSessionInUrl: false,
31 },
32 })
33 `,
34 },
35 {
36 name: 'App.tsx',
37 language: 'tsx',
38 code: `
39import React, { useState, useEffect } from 'react';
40import { View, Text, FlatList } from 'react-native';
41import { briven } from '../utils/briven';
42
43export default function App() {
44 const [todos, setTodos] = useState([]);
45
46 useEffect(() => {
47 const getTodos = async () => {
48 try {
49 const { data: todos, error } = await briven.from('todos').select();
50
51 if (error) {
52 console.error('Error fetching todos:', error.message);
53 return;
54 }
55
56 if (todos && todos.length > 0) {
57 setTodos(todos);
58 }
59 } catch (error) {
60 console.error('Error fetching todos:', error.message);
61 }
62 };
63
64 getTodos();
65 }, []);
66
67 return (
68 <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
69 <Text>Todo List</Text>
70 <FlatList
71 data={todos}
72 keyExtractor={(item) => item.id.toString()}
73 renderItem={({ item }) => <Text key={item.id}>{item.name}</Text>}
74 />
75 </View>
76 );
77};
78
79`,
80 },
81 ]
82
83 return <MultipleCodeBlock files={files} />
84}
85
86export default ContentFile