Init commit

pages/items/overview/[id].vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <div class="row">
+        <div class="col-md-6 col-sm-12">
+            <h1 class="display-4 mb-0"> {{ item.name }}</h1>
+            <p class="text-muted" v-html="item.description"></p>
+        </div>
+
+        <div class="col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
+            <img class="border rounded border-dark" :src="item.getIcon('latest')"/>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="d-flex flex-wrap gap-3">
+            <Badge name="identifier">{{ item.id }}</Badge>
+            <Badge name="hand-coin">{{ item.priceTotal }}</Badge>
+            <Badge name="hand-coin-outline">{{ item.price }}</Badge>
+            <Badge name="keyboard-variant" v-if="item.active">Active</Badge>
+        </div>
+    </div>
+
+    <div class="row mt-4">
+        <div class="col-md-6 col-sm-12 border-start border-light border-opacity-25 border-4"
+            v-if="components.length > 0">
+            <h4 class="fw-light">Component</h4>
+            <div class="d-flex justify-content-around align-items-center gap-2 flex-wrap">
+                <NuxtLink v-for="component in components" :to="`/items/overview/${component.id}`" :key="component.id">
+                    <img class="border rounded border-dark" :src="component.getIcon('latest')"/>
+                </NuxtLink>
+            </div> 
+        </div>
+
+        <div class="col-md-6 col-sm-12 border-start border-light border-opacity-25 border-4"
+            v-if="composites.length > 0">
+            <h4 class="fw-light">Composite</h4>
+            <div class="d-flex justify-content-around align-items-center gap-2 flex-wrap">
+                <NuxtLink v-for="composite in composites" :to="`/items/overview/${composite.id}`" :key="composite.id">
+                    <img class="border rounded border-dark" :src="composite.getIcon('latest')"/>
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import useClient from '../../../composables/useClient';
+import { Item } from '~/core/models';
+import Badge from '~/components/Badge.vue';
+
+const route = useRoute();
+const id = route.params.id as unknown;
+
+const { client } = useClient();
+const items = await client.items.listAsync({locale: "default", version: "latest"});
+const _default = new Item({});
+
+const item = items.find((x) => x.id == id) || _default;
+const components = item.from.map((id) => items.find((x) => x.id == id) || _default);
+const composites = item.to.map((id) => items.find((x) => x.id == id) || _default);
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>