konnosDashboard
content.tsx145 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="environments/environment.ts" />
16 <ConnectTabTrigger value="src/app/briven.service.ts" />
17 <ConnectTabTrigger value="src/app/app.component.ts" />
18 <ConnectTabTrigger value="src/app/app.component.html" />
19 <ConnectTabTrigger value="src/app/app.module.ts" />
20 </ConnectTabTriggers>
21
22 <ConnectTabContent value="environments/environment.ts">
23 <SimpleCodeBlock className="ts" parentClassName="min-h-72">
24 {`
25export const environment = {
26 brivenUrl: '${projectKeys.apiUrl ?? 'your-project-url'}',
27 brivenKey: '${projectKeys.publishableKey ?? '<prefer publishable key instead of anon key for mobile apps>'}',
28};
29`}
30 </SimpleCodeBlock>
31 </ConnectTabContent>
32
33 <ConnectTabContent value="src/app/briven.service.ts">
34 <SimpleCodeBlock className="ts" parentClassName="min-h-72">
35 {`
36import { Injectable } from '@angular/core';
37import { createClient, BrivenClient } from '@supabase/supabase-js';
38import { environment } from '../environments/environment';
39
40@Injectable({
41 providedIn: 'root',
42})
43export class BrivenService {
44 private briven: BrivenClient;
45 constructor() {
46 this.briven = createClient(
47 environment.brivenUrl,
48 environment.brivenKey
49 );
50 }
51
52 getTodos() {
53 return this.briven.from('todos').select('*');
54 }
55}
56`}
57 </SimpleCodeBlock>
58 </ConnectTabContent>
59
60 <ConnectTabContent value="src/app/app.component.ts">
61 <SimpleCodeBlock className="ts" parentClassName="min-h-72">
62 {`
63import { Component, OnInit } from '@angular/core';
64import { BrivenService } from './briven.service';
65
66@Component({
67 selector: 'app-root',
68 templateUrl: 'app.component.html',
69 styleUrls: ['app.component.scss'],
70})
71export class AppComponent implements OnInit {
72 todos: any[] = [];
73
74 constructor(private brivenService: BrivenService) {}
75
76 async ngOnInit() {
77 await this.loadTodos();
78 }
79
80 async loadTodos() {
81 const { data, error } = await this.brivenService.getTodos();
82 if (error) {
83 console.error('Error fetching todos:', error);
84 } else {
85 this.todos = data;
86 }
87 }
88}
89`}
90 </SimpleCodeBlock>
91 </ConnectTabContent>
92
93 <ConnectTabContent value="src/app/app.component.html">
94 <SimpleCodeBlock className="html" parentClassName="min-h-72">
95 {`
96<ion-header>
97<ion-toolbar>
98 <ion-title>Todo List</ion-title>
99</ion-toolbar>
100</ion-header>
101
102<ion-content>
103<ion-list>
104 <ion-item *ngFor="let todo of todos">
105 <ion-label>{{ todo.title }}</ion-label>
106 </ion-item>
107</ion-list>
108</ion-content>
109`}
110 </SimpleCodeBlock>
111 </ConnectTabContent>
112
113 <ConnectTabContent value="src/app/app.module.ts">
114 <SimpleCodeBlock className="ts" parentClassName="min-h-72">
115 {`
116import { NgModule } from '@angular/core';
117import { FormsModule } from '@angular/forms';
118import { BrowserModule } from '@angular/platform-browser';
119import { RouterModule } from '@angular/router';
120
121import { IonicModule } from '@ionic/angular';
122
123import { AppComponent } from './app.component';
124import { BrivenService } from './briven.service';
125
126@NgModule({
127 imports: [
128 BrowserModule,
129 FormsModule,
130 RouterModule.forRoot([]),
131 IonicModule.forRoot({ mode: 'ios' }),
132 ],
133 declarations: [AppComponent],
134 providers: [BrivenService],
135 bootstrap: [AppComponent],
136})
137export class AppModule {}
138`}
139 </SimpleCodeBlock>
140 </ConnectTabContent>
141 </ConnectTabs>
142 )
143}
144
145export default ContentFile