From bdd1f12362bcede47a2d6e392069c2517edf9d96 Mon Sep 17 00:00:00 2001
From: ES-Alexander <sandman.esalexander@gmail.com>
Date: Tue, 25 Apr 2023 18:22:23 +1000
Subject: [PATCH] website: Counter: include type+tags

---
 website/src/components/Counter.vue | 50 +++++++++++++++++-------------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/website/src/components/Counter.vue b/website/src/components/Counter.vue
index 4552409..102685d 100644
--- a/website/src/components/Counter.vue
+++ b/website/src/components/Counter.vue
@@ -1,26 +1,34 @@
 <template>
   <v-container>
-    <v-row>
-      <v-col v-for="extension in extensions" :key="extension.identifier">
-        <v-card class="mx-auto" width="400px" outlined>
-          <v-card-title>
-            <v-row no-gutters class="justify-center align-center">
-              <v-avatar tile size="50">
-                <v-img :src="extension.extension_logo" />
-              </v-avatar>
-              <v-col>
-                <v-card-title>
-                  <a v-bind:href="extension.website">{{ extension.name }}</a>
-                </v-card-title>
-                <v-card-subtitle>
-                  <a v-bind:href="'https://hub.docker.com/r/' + extension.docker">{{ extension.identifier }}</a>
-                </v-card-subtitle>
-              </v-col>
-            </v-row>
-          </v-card-title>
-          <v-card-text>{{ extension.description }}</v-card-text>
-        </v-card>
-      </v-col>
+    <v-row v-for="section in ['device-integration', 'theme', 'other', 'example']">
+      <h1>{{ section }}</h1>
+      <v-row>
+        <v-col v-for="extension in extensions" :key="extension.identifier">
+          <v-card v-if="Object.values(extension.versions)[0].type === section" class="mx-auto" width="400px" outlined>
+            <v-card-title>
+              <v-row no-gutters class="justify-center align-center">
+                <v-avatar tile size="50">
+                  <v-img :src="extension.extension_logo" />
+                </v-avatar>
+                <v-col>
+                  <v-card-title>
+                    <a v-bind:href="extension.website">{{ extension.name }}</a>
+                  </v-card-title>
+                  <v-card-subtitle>
+                    <a v-bind:href="'https://hub.docker.com/r/' + extension.docker">{{ extension.identifier }}</a>
+                  </v-card-subtitle>
+                  <v-card-actions>
+                    <v-chip label class="ma-1" color="blue" v-for="tag in Object.values(extension.versions)[0].filter_tags">
+                      {{ tag }}
+                    </v-chip>
+                  </v-card-actions>
+                </v-col>
+              </v-row>
+            </v-card-title>
+            <v-card-text>{{ extension.description }}</v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
     </v-row>
   </v-container>
 </template>