Add some sample data to community view

block-core · Jun 17, 2024 · 76f9742 · 76f9742
1 parent 78b30e1
commit 76f9742
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 4 deletions.
diff --git a/app/src/app/communities/communities.component.html b/app/src/app/communities/communities.component.html
@@ -27,8 +27,10 @@
   </div>
 </div>
 
+
+
 @if (viewStyle() == 'card') {
-<mat-card appearance="outlined">
+<!-- <mat-card appearance="outlined">
   <mat-card-header>
     <mat-card-title>Dog Lovers</mat-card-title>
     <mat-card-subtitle>If you love cats, don't join us.</mat-card-subtitle>
@@ -46,7 +48,29 @@
   <mat-card-actions>
     <button mat-button>Open</button>
   </mat-card-actions>
-</mat-card>
+</mat-card> -->
+
+<div class="container responsive-grid">
+    <mat-card *ngFor="let card of cards()">
+      <mat-card-header>
+        <mat-card-title>{{ card.title }} </mat-card-title>
+      </mat-card-header>
+      <br />
+      <img mat-card-image [src]="card.imageUrl" />
+      <mat-card-content>
+        <br />
+        <p>
+          {{ card.description }}
+        </p>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-button>PREVIEW</button>
+        <button mat-button>JOIN</button>
+      </mat-card-actions>
+    </mat-card>
+  </div>
+
+
 } @else {
 <div class="mat-elevation-z8">
   <table mat-table class="full-width-table" matSort aria-label="Elements">

diff --git a/app/src/app/communities/communities.component.scss b/app/src/app/communities/communities.component.scss
@@ -14,4 +14,23 @@
 
 .search-input {
     width: 100%;
-}
+}
+
+
+
+
+.container {
+    padding: 24px;
+  }
+
+  img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+  }
+
+  .responsive-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 24px;
+  }
diff --git a/app/src/app/communities/communities.component.ts b/app/src/app/communities/communities.component.ts
@@ -20,6 +20,14 @@ import { MatButtonModule } from '@angular/material/button';
 import { TableDataSource, TableItem } from './communities-datasource';
 import { Router } from '@angular/router';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+type CardContent = {
+  title: string;
+  description: string;
+  imageUrl: string;
+};
+
 @Component({
   selector: 'app-communities',
   standalone: true,
@@ -37,6 +45,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
     MatSortModule,
     MatSlideToggleModule,
     FormsModule,
+    MatToolbarModule,
   ],
   templateUrl: './communities.component.html',
   styleUrl: './communities.component.scss',
@@ -51,6 +60,21 @@ export class CommunitiesComponent {
   @ViewChild(MatTable) table!: MatTable<TableItem>;
   dataSource = new TableDataSource();
 
+  cards = signal<CardContent[]>([]);
+
+  images = [
+    'nature',
+    'sky',
+    'grass',
+    'mountains',
+    'rivers',
+    'glacier',
+    'forest',
+    'streams',
+    'rain',
+    'clouds',
+  ];
+
   // hideSingleSelectionIndicator = signal(false);
   // toggle() {
   //   // While standard inputs are read-only, you can write directly to model inputs.
@@ -103,7 +127,16 @@ export class CommunitiesComponent {
       console.log(`The checked is: ${this.checked()})`);
     });
 
-    console.log('HI!');
+    const cards: CardContent[] = [];
+    for (let i = 0; i < this.images.length; i++) {
+      cards.push({
+        title: `Community ${i + 1}`,
+        description: `This is a description of community. We are a great community with many members.`,
+        imageUrl: `https://picsum.photos/seed/${this.images[i]}x/200/300`,
+      });
+    }
+
+    this.cards.set(cards);
   }
 
   open(community: string) {