break down search component into smaler components

2026-06-05 04:53:01 +00:00 · 2022-01-23 10:27:39 +03:00
parent 7945c04a06
commit 7689f13fdc
16 changed files with 596 additions and 469 deletions
@@ -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>