break down search component into smaler components

2026-06-04 20:43:04 +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,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>