Add rarities composable and remove unused code

composables/useQueryablePagination.ts

@@ -1,18 +0,0 @@
-
-const isNumeric = (num: any) => (typeof(num) === 'number' || typeof(num) === "string" && num.trim() !== '') && !isNaN(num as number);
-
-export default function useQueryablePagination<T>(iterable: Array<T>, pageSize: number, query: Ref<string>) {
-  const pagination = computed(() => {
-    let filtered = [];
-    if (isNumeric(query.value))
-        filtered = iterable.filter((x: any) => x.id == parseInt(query.value, 10));
-    else 
-        filtered = iterable.filter((x) => x.title.toLowerCase().includes(query.value.toLowerCase()));
-
-    return usePagination(icons, 100);
-})
-
-  return {
-  
-  }
-}

composables/useRarities.ts

@@ -0,0 +1,11 @@
+export default function useRarities(value: any) {
+  const rarities: any = {
+    "1": "Rare",
+    "2": "Epic",
+    "3": "Legendary",
+    "4": "Mythic",
+    "5": "Ultimate"
+  };
+  if (Object.hasOwn(rarities, value)) return rarities[value];
+  return "";
+}

pages/summoner-icons/index.vue

@@ -53,7 +53,7 @@ const p = computed(() => {
                     <div class="d-inline-flex justify-content-end gap-1 m-1">
                         <span style="background: #0008; padding: 1px;" class="px-1 rounded">{{ summonerIcon.yearReleased }}</span>
                         <span v-if="summonerIcon.isLegacy" class="px-1 rounded" style="background: #0008; padding: 1px;">Legacy</span>
-                        <span v-if="summonerIcon.rarities && summonerIcon.rarities.length > 0 && summonerIcon.rarities[0].rarity != '0'" class="px-1 rounded" style="background: #0008; padding: 1px;">{{ summonerIcon.rarities[0].rarity }}</span>
+                        <span v-if="summonerIcon.rarities && summonerIcon.rarities.length > 0 && summonerIcon.rarities[0].rarity != '0'" class="px-1 rounded" style="background: #0008; padding: 1px;">{{ useRarities(summonerIcon.rarities[0].rarity) }}</span>
                     </div>
                 </div>
             </div>

pages/ward-skins/index.vue

@@ -20,13 +20,6 @@ const p = computed(() => {
 
     return filtered;
 });
-
-const rarities = {
-    "1": "Epic",
-    "2": "Legendary",
-    "3": "Ultimate",
-    "4": "Mythic"
-};
 </script>
 
 <template>
@@ -58,7 +51,7 @@ const rarities = {
                 <div class="position-absolute z-2 d-flex flex-column justify-content-start align-items-end">
                     <div class="m-2">
                         <span v-if="wardSkin.isLegacy" style="background: #0008;" class="rounded p-1">Legacy</span>
-                        <span v-if="wardSkin.rarities && wardSkin.rarities.length > 0 && wardSkin.rarities[0].rarity != '0'" style="background: #0008;" class="rounded ms-1 p-1">{{ rarities[wardSkin.rarities[0].rarity as keyof typeof rarities] }}</span>
+                        <span v-if="wardSkin.rarities && wardSkin.rarities.length > 0 && wardSkin.rarities[0].rarity != '0'" style="background: #0008;" class="rounded ms-1 p-1">{{ useRarities(wardSkin.rarities[0].rarity) }}</span>
                     </div>
                 </div>
             </div>