Add TFT items

layouts/default.vue

@@ -60,6 +60,11 @@
                                   <MaterialIcon name="penguin" :size="24" /> Companions
                                 </NuxtLink>
                               </li>
+                              <li>
+                                <NuxtLink class="nav-link" to="/tft-items">
+                                  <MaterialIcon name="magic-staff" :size="24" /> Items
+                                </NuxtLink>
+                              </li>
                             </ul>
                           </div>
                         </li>

pages/tft-items/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="d-flex flex-column gap-2">
+    <h1>TFT Items</h1>
+
+    <div class="overflow-hidden rounded border border-light border-opacity-25 p-4">
+      <table class="sortable table table-borderless">
+        <thead>
+          <tr>
+            <th scope="col">Guid</th>
+            <th scope="col">Icon</th>
+            <th scope="col">Name</th>
+            <th scope="col">Name Id</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="tftItem in tftItems" :key="tftItem.guid" style="postion: relative;">
+            <th scope="row">
+              <NuxtLink class="text-decoration-none text-light stretched-link" :to="`/tft-items/overview/${tftItem.guid}`">
+                {{ tftItem.guid }}
+              </NuxtLink>
+            </th>
+            <th scope="row">
+              <img class="rounded" :src="tftItem.getSquareIcon('latest')" width="32" height="32" loading="lazy" onerror="this.onerror = null; this.src = '/clean-cuts/img/error.png'"/>
+            </th>
+            <th scope="row">
+              <span class="text-decoration-none text-light fw-normal">{{ tftItem.name }}</span>
+            </th>
+            <th scope="row">
+              {{ tftItem.nameId }}
+            </th>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useClient from '~/composables/useClient';
+import useLocale from '~/composables/useLocale';
+
+const { client } = useClient();
+const { currentLocale } = useLocale();
+const getTftItems = async() => await client.tftItems.listAsync({ locale: currentLocale.value, version: "latest"});
+
+const tftItems = ref(await getTftItems());
+watch(currentLocale, async() => {
+  tftItems.value = await getTftItems();
+});
+</script>