Added Explore Tab

src/components/Genres.vue

@@ -0,0 +1,140 @@
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+
+import { getJson } from '../scripts/fetch.js';
+import { useRandColor } from '../scripts/colors.js';
+import { useRoute } from '../scripts/util.js';
+
+import AlbumItem from './AlbumItem.vue';
+
+const props = defineProps(['id']);
+defineEmits(['get-album']);
+
+const data = reactive({
+    title: '',
+    spotlight: [],
+    featured: [],
+    community: [],
+  }),
+  btns = reactive({
+    moods: [],
+    genres: [],
+  });
+
+function get(id) {
+  if (props.id || id) {
+    getJson(
+      'https://hyperpipeapi.onrender.com/genres/' + (props.id || id),
+    ).then(res => {
+      console.log(res);
+
+      for (let i of ['title', 'community', 'spotlight', 'featured']) {
+        data[i] = res[i];
+      }
+
+      useRoute('/explore/' + (props.id || id));
+    });
+  } else {
+    getJson('https://hyperpipeapi.onrender.com/genres').then(res => {
+      console.log(res);
+
+      for (let i of ['moods', 'genres']) {
+        btns[i] = res[i];
+      }
+
+      useRoute('/explore/');
+    });
+  }
+}
+
+onMounted(get);
+</script>
+
+<template>
+  <template v-if="data.title">
+    <h2 class="head">{{ data.title }}</h2>
+
+    <template v-for="type in ['featured', 'spotlight', 'community']">
+      <h3 class="head">{{ type }}</h3>
+      <div class="grid-3">
+        <template v-for="i in data[type]">
+          <AlbumItem
+            :name="i.title"
+            :author="i.subtitle"
+            :art="'url(' + i.thumbnails[0].url + ')'"
+            @open-album="$emit('get-album', '/playlist?list=' + i.id)" />
+        </template>
+      </div>
+    </template>
+  </template>
+
+  <template v-else>
+    <h2 v-if="btns.moods.length > 0">Moods</h2>
+
+    <div class="btn-grid">
+      <button
+        v-for="i in btns.moods"
+        class="btn"
+        :style="`--btn-color: ${i.subtitle};`"
+        @click="get(i.id)">
+        {{ i.title }}
+      </button>
+    </div>
+
+    <h2 v-if="btns.genres.length > 0">Genres</h2>
+
+    <div class="btn-grid">
+      <button
+        v-for="i in btns.genres"
+        class="btn"
+        :style="`--btn-color: ${i.subtitle};`"
+        @click="get(i.id)">
+        {{ i.title }}
+      </button>
+    </div>
+  </template>
+</template>
+
+<style scoped>
+.btn-grid {
+  display: grid;
+  grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
+  grid-auto-rows: 1fr;
+  grid-gap: 0.125rem;
+  padding: 1rem 0;
+}
+.btn {
+  aspect-ratio: 1;
+  padding: 0.75rem;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  font-weight: bold;
+  letter-spacing: 0.125rem;
+  background-color: var(--color-background-mute);
+  color: var(--btn-color);
+}
+.btn:hover {
+  background-color: var(--color-background-soft);
+}
+.head {
+  margin-top: 1.75rem;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+@media (min-width: 760px) {
+  .btn-grid {
+    grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(
+        100% / 4
+      );
+  }
+}
+
+@media (min-width: 1024px) {
+  .btn-grid {
+    grid-template-columns: calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(
+        100% / 5
+      ) calc(100% / 5);
+  }
+}
+</style>

src/components/NavBar.vue

@@ -11,6 +11,7 @@ const emit = defineEmits(['update-page', 'update-search']),
     home: true,
     playlist: false,
     prefs: false,
+    genres: false,
   });
 
 const Toggle = p => {
@@ -33,13 +34,20 @@ const Toggle = p => {
 
     <div class="wrap">
       <span
-        :class="'nav-ico bi bi-house ' + page.home"
+        class="nav-ico bi bi-house"
+        :data-active="page.home"
         @click="Toggle('home')"></span>
       <span
-        :class="'nav-ico bi bi-collection ' + page.playlist"
+        class="nav-ico bi bi-compass"
+        :data-active="page.genres"
+        @click="Toggle('genres')"></span>
+      <span
+        class="nav-ico bi bi-collection"
+        :data-active="page.playlist"
         @click="Toggle('playlist')"></span>
       <span
-        :class="'nav-ico bi bi-gear ' + page.prefs"
+        class="nav-ico bi bi-gear"
+        :data-active="page.prefs"
         @click="Toggle('prefs')"></span>
     </div>
 
@@ -64,6 +72,7 @@ nav {
 }
 h1.bi {
   font-size: calc(1.75rem + 1.5vw);
+  padding-bottom: 0;
 }
 .bi {
   font-size: calc(1rem + 1.5vw);
@@ -75,4 +84,9 @@ h1.bi {
 .nav-ico {
   margin: 0 0.5rem;
 }
+@media (min-width: 1024px) {
+  .bi {
+    font-size: 1.5rem;
+  }
+}
 </style>

src/components/Prefs.vue

@@ -63,6 +63,7 @@ onMounted(() => {
     @change="setTheme($event.target.value)">
     <option value="dark">Dark (Default)</option>
     <option value="light">Light</option>
+    <option value="nord">Nord</option>
   </select>
 
   <h2>Audio Player</h2>