break down search component into smaler components

src/components/Search/AlbumGrid.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="albums-results border">
+    <div class="heading">💿 ALBUMS</div>
+    <div class="grid">
+      <AlbumCard v-for="album in albums" :key="album" :album="album" />
+    </div>
+    <LoadMore v-if="more" @loadMore="loadMore" />
+  </div>
+</template>
+
+<script>
+import AlbumCard from "@/components/shared/AlbumCard.vue";
+import LoadMore from "./LoadMore.vue";
+
+export default {
+  props: ["albums", "more"],
+  components: {
+    AlbumCard,
+    LoadMore,
+  },
+  setup(props, { emit }) {
+    function loadMore() {
+      emit("loadMore");
+    }
+
+    return {
+      loadMore,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.right-search .albums-results {
+  border-radius: 0.5rem;
+  background: #0f131b44;
+
+  margin-left: $small;
+  margin-top: $small;
+  padding:  $small 0;
+
+  .grid {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 0 0 $small;
+    gap: $small;
+  }
+}
+</style>

src/components/Search/ArtistGrid.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="artists-results border">
+    <div class="heading">😳 ARTISTS</div>
+    <div class="grid">
+      <ArtistCard
+        v-for="artist in artists"
+        :key="artist"
+        :artist="artist"
+      />
+    </div>
+    <LoadMore v-if="more" @loadMore="loadMore" />
+  </div>
+</template>
+
+<script>
+import ArtistCard from "@/components/shared/ArtistCard.vue";
+import LoadMore from "./LoadMore.vue";
+
+export default {
+  props: ["artists", "more"],
+  components: {
+    ArtistCard,
+    LoadMore,
+  },
+  setup(props, { emit }) {
+    function loadMore() {
+      emit("loadMore");
+    }
+
+    return {
+      loadMore,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.right-search .artists-results {
+  border-radius: 0.5rem;
+  background: #1214178c;
+  margin: 0 0 0 $small;
+  padding: $small 0;
+
+  .grid {
+    padding: 0 0 0 $small;
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+</style>

src/components/Search/Filters.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="filter">
+    <div
+      class="item"
+      v-for="filter in filters"
+      :key="filter"
+      @click="removeFilter(filter)"
+    >
+      {{ filter }}<span class="cancel image"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["filters"],
+  setup(props, { emit }) {
+    const removeFilter = (filter) => {
+      emit("removeFilter", filter);
+    };
+
+    return {
+      removeFilter,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.right-search .filter {
+  display: flex;
+  margin-left: 3rem;
+  height: 2rem;
+
+  .item {
+    &:hover {
+      width: 4rem;
+
+      .cancel {
+        position: absolute;
+        right: 0.5rem;
+        width: 1.5rem;
+        height: 1.5rem;
+        background-image: url(../../assets/icons/a.svg);
+        background-size: 70%;
+      }
+    }
+  }
+}
+</style>

src/components/Search/LoadMore.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="morexx">
+    <button @click="loadMore">
+      <div class="text">Load All</div>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  setup(props, { emit }) {
+    function loadMore() {
+      emit("loadMore");
+    }
+
+    return {
+      loadMore,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.morexx {
+  display: grid;
+  place-items: center;
+  margin-top: $small;
+
+  button {
+    height: 2.5rem;
+    width: 10rem;
+    display: grid;
+  }
+}
+</style>

src/components/Search/Loader.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="loader" v-if="loading"></div>
+</template>
+
+<script>
+import state from "@/composables/state.js";
+export default {
+  setup() {
+    return {
+      loading: state.loading,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.loader {
+  position: absolute;
+  right: 0.65rem;
+  top: 0.65rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: dotted $blue;
+  border-radius: 50%;
+  animation: spin 0.25s linear infinite;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>

src/components/Search/Options.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="options" v-if="magic_flag">
+    <div class="item info">Filter by:</div>
+    <div
+      class="item"
+      v-for="option in options"
+      :key="option"
+      @click="addFilter(option.icon)"
+    >
+      {{ option.title }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["magic_flag"],
+  setup(props, { emit }) {
+    const options = [
+      {
+        title: "🎵 Track",
+        icon: "🎵",
+      },
+      {
+        title: "💿 Album",
+        icon: "💿",
+      },
+      {
+        title: "🙄 Artist",
+        icon: "🙄",
+      },
+      {
+        title: "😍 Playlist",
+        icon: "😍",
+      },
+      {
+        title: "📁 Folder",
+        icon: "📁",
+      },
+    ];
+
+    function addFilter(value) {
+      emit("addFilter", value);
+    }
+
+    return {
+      options,
+      addFilter,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.right-search .options {
+  display: flex;
+
+  .item {
+    margin: $small;
+  }
+}
+</style>

src/components/Search/TracksGrid.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="tracks-results border" v-if="tracks">
+    <div class="heading">🎵 TRACKS</div>
+    <div class="items">
+      <table>
+        <tbody>
+          <SongItem v-for="track in tracks" :key="track" :song="track" />
+        </tbody>
+      </table>
+      <LoadMore v-if="more" @loadMore="loadMore" />
+    </div>
+  </div>
+</template>
+
+<script>
+import SongItem from "@/components/shared/SongItem.vue";
+import LoadMore from "./LoadMore.vue";
+
+export default {
+  props: ["tracks", "more"],
+  components: {
+    SongItem,
+    LoadMore,
+  },
+  setup(props, { emit }) {
+    function loadMore() {
+      emit("loadMore", "tracks");
+    }
+
+    return {
+      loadMore,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.right-search .tracks-results {
+  border-radius: 0.5rem;
+  margin-left: $small;
+  padding: $small;
+}
+</style>