website: Counter: include type+tags

bluerobotics · Apr 25, 2023 · bdd1f12 · bdd1f12
1 parent b01893c
commit bdd1f12
Showing 1 changed file with 29 additions and 21 deletions.
diff --git 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>