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