create re-usable components

src/components/PlaylistView/FeaturedArtists.vue

@@ -5,29 +5,24 @@
       <div class="next border" @click="scrollRight"></div>
     </div>
     <div class="artists" ref="artists_dom">
-      <div class="artist border c1 image">
+      <div class="xartist border c1 image">
         <div class="blur"></div>
         <div class="s2"></div>
         <p>Featured Artists</p>
       </div>
-      <div class="artist border" v-for="artist in artists" :key="artist">
-        <div>
-          <div
-            class="artist-image image"
-            :style="{ backgroundImage: `url('${artist.image}')` }"
-          ></div>
-          <p class="artist-name ellipsis">{{ artist.name }}</p>
-          <div class="a-circle"></div>
-        </div>
-      </div>
+      <ArtistCard v-for="artist in artists" :key="artist" :artist="artist" />
     </div>
   </div>
 </template>
 <script>
 import { ref } from "@vue/reactivity";
+import ArtistCard from "@/components/shared/ArtistCard.vue";
 
 export default {
   props: ["artists"],
+  components: {
+    ArtistCard
+  },
   setup() {
     const artists_dom = ref(null);
 
@@ -121,52 +116,6 @@ export default {
   }
 }
 
-.f-artists .artist {
-  flex: 0 0 auto;
-  overflow: hidden;
-  position: relative;
-  margin-left: $smaller;
-  margin-right: $smaller;
-  width: 9em;
-  height: 11em;
-  border-radius: $small;
-  background-color: #232452;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  .artist-image {
-    width: 7em;
-    height: 7em;
-    border-radius: 50%;
-    margin-bottom: $small;
-    background: url("../../assets/images/null.webp");
-    background-size: 7rem 7rem;
-    background-repeat: no-repeat;
-    background-position: center;
-    transition: all 0.5s ease-in-out;
-    border: solid 1px rgba(5, 5, 5, 0.055);
-    box-shadow: 0px 0px 80px rgb(0, 0, 0);
-  }
-
-  &:hover {
-    .artist-image {
-      background-position: 50% 20%;
-      border-radius: 20%;
-      background-size: 10rem 10rem;
-    }
-  }
-
-  .artist-name {
-    margin: 0;
-    text-align: center;
-    font-size: 0.9rem;
-    font-weight: 510;
-    max-width: 7rem;
-  }
-}
-
 .f-artists .c1 {
   position: relative;
   background-size: 400px 11rem;