FEAT: playlists player v1

components/playlists-list.vue

@@ -0,0 +1,14 @@
+<template>
+  <section>
+    <div v-for="playlist in playlists.files" class="text-white">
+      <NuxtLink :to="'/playlists/' + playlist"
+        class="compilation mx-auto p-4 inline-flex hover:bg-esyellow hover:text-black">
+        {{ playlist }}
+      </NuxtLink>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const { data: playlists } = await useFetch('/api/playlists')
+</script>

components/zero-b.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="compilation mx-auto p-4 inline-flex">
-    <atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
-      <img src="/zero/sky-b.jpg" data-atropos-offset="-8" />
-      <img src="/zero/propeller-b.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
-      <img src="/zero/zero-b.png" data-atropos-offset="0" class="absolute inset-0 object-cover" />
-      <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
-    </atropos-component>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref } from 'vue'
-
-const atropos = ref(null)
-</script>
-
-<style scoped>
-/* .my-atropos {
-  width: 320px;
-  height: 160px;
-} */
-.logo {
-    filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.5));
-    left: 14%;
-    top: 10%;
-  }
-</style>