metadata component skeletons

src/app/components/metadata/categories/categories.component.html

@@ -1,3 +1,17 @@
 <div class="categories-container">
-  Categories Component
+  <div class="category-list-header">
+    <p>Categories</p>
+    <app-divider />
+  </div>
+
+  <div class="category-list">
+    @for (category of categories(); track category.id) {
+      <div>{{ category.name }}</div>
+    }
+    @if (!categories().length) {
+      <div class="category-list-empty">
+        No categories to display
+      </div>
+    }
+  </div>
 </div>

src/app/components/metadata/categories/categories.component.scss

@@ -0,0 +1,28 @@
+.categories-container {
+  display: grid;
+  gap: 1rem;
+}
+
+.category-list-header {
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    font-size: 1.8rem;
+    line-height: 100%;
+    font-weight: 400;
+    margin: 0;
+  }
+
+  app-divider {
+    width: 100%;
+  }
+}
+
+.category-list {
+  display: grid;
+  gap: 1rem;
+  justify-content: center;
+}

src/app/components/metadata/categories/categories.component.ts

@@ -1,9 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
+import { CategoryService } from '../../../services/category.service';
+import { DividerComponent } from '../../divider/divider.component';
 
 @Component({
   selector: 'app-categories',
-  imports: [],
+  imports: [
+    DividerComponent
+  ],
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss'
 })
-export class CategoriesComponent { }
+export class CategoriesComponent {
+  protected categories = computed(() => this.categoryService.categories());
+
+  public constructor(private readonly categoryService: CategoryService) { }
+}

src/app/components/metadata/merchants/merchants.component.html

@@ -1,3 +1,17 @@
 <div class="merchants-container">
-  Merchants Component
+  <div class="merchant-list-header">
+    <p>Merchants</p>
+    <app-divider />
+  </div>
+
+  <div class="merchant-list">
+    @for (merchant of merchants(); track merchant.id) {
+      <div>{{ merchant.name }}</div>
+    }
+    @if (!merchants().length) {
+      <div class="merchant-list-empty">
+        No merchants to display
+      </div>
+    }
+  </div>
 </div>

src/app/components/metadata/merchants/merchants.component.scss

@@ -0,0 +1,28 @@
+.merchants-container {
+  display: grid;
+  gap: 1rem;
+}
+
+.merchant-list-header {
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    font-size: 1.8rem;
+    line-height: 100%;
+    font-weight: 400;
+    margin: 0;
+  }
+
+  app-divider {
+    width: 100%;
+  }
+}
+
+.merchant-list {
+  display: grid;
+  gap: 1rem;
+  justify-content: center;
+}

src/app/components/metadata/merchants/merchants.component.ts

@@ -1,9 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
+import { MerchantService } from '../../../services/merchant.service';
+import { DividerComponent } from '../../divider/divider.component';
 
 @Component({
   selector: 'app-merchants',
-  imports: [],
+  imports: [
+    DividerComponent
+  ],
   templateUrl: './merchants.component.html',
   styleUrl: './merchants.component.scss'
 })
-export class MerchantsComponent { }
+export class MerchantsComponent {
+  protected merchants = computed(() => this.merchantService.merchants());
+
+  public constructor(private readonly merchantService: MerchantService) { }
+}

src/app/components/metadata/tags/tags.component.html

@@ -1,3 +1,17 @@
 <div class="tags-container">
-  Tags Component
+  <div class="tag-list-header">
+    <p>Tags</p>
+    <app-divider />
+  </div>
+
+  <div class="tag-list">
+    @for (tag of tags(); track tag.id) {
+      <div>{{ tag.name }}</div>
+    }
+    @if (!tags().length) {
+      <div class="tag-list-empty">
+        No tags to display
+      </div>
+    }
+  </div>
 </div>

src/app/components/metadata/tags/tags.component.scss

@@ -0,0 +1,28 @@
+.tags-container {
+  display: grid;
+  gap: 1rem;
+}
+
+.tag-list-header {
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    font-size: 1.8rem;
+    line-height: 100%;
+    font-weight: 400;
+    margin: 0;
+  }
+
+  app-divider {
+    width: 100%;
+  }
+}
+
+.tag-list {
+  display: grid;
+  gap: 1rem;
+  justify-content: center;
+}

src/app/components/metadata/tags/tags.component.ts

@@ -1,9 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
+import { TagService } from '../../../services/tag.service';
+import { DividerComponent } from '../../divider/divider.component';
 
 @Component({
   selector: 'app-tags',
-  imports: [],
+  imports: [
+    DividerComponent
+  ],
   templateUrl: './tags.component.html',
   styleUrl: './tags.component.scss'
 })
-export class TagsComponent { }
+export class TagsComponent {
+  protected tags = computed(() => this.tagService.tags());
+
+  public constructor(private readonly tagService: TagService) { }
+}