From be4084b79a3ff5189091102427ee2e407ce7a56d Mon Sep 17 00:00:00 2001
From: BlossomiShymae <87099578+BlossomiShymae@users.noreply.github.com>
Date: Fri, 13 Sep 2024 11:13:49 -0500
Subject: [PATCH] Add TFT items

---
 layouts/default.vue       |  5 ++++
 pages/tft-items/index.vue | 50 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 pages/tft-items/index.vue

diff --git a/layouts/default.vue b/layouts/default.vue
index 37979ac..878c6b0 100644
--- a/layouts/default.vue
+++ b/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>
diff --git a/pages/tft-items/index.vue b/pages/tft-items/index.vue
new file mode 100644
index 0000000..4d5a124
--- /dev/null
+++ b/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>
\ No newline at end of file