made seperate artist component

Aman-Mandal · Oct 5, 2022 · 7d02a04 · 7d02a04
1 parent d017ead
commit 7d02a04
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git a/components/Artist/Artist.jsx b/components/Artist/Artist.jsx
@@ -0,0 +1,25 @@
+import Image from "next/image";
+import React from "react";
+
+const Artist = ({ img, name, count }) => {
+  return (
+    <div className="flex flex-col items-center gap-2 hover:scale-105">
+      <div className="rounded-md w-max h-max overflow-hidden mx-2 cursor-pointer z-10">
+        <Image
+          src={img}
+          alt={name}
+          width={150}
+          height={150}
+          className="rounded-md w-full object-top"
+        />
+      </div>
+
+      <div className="flex-col items-center text-center">
+        <p className="text-gray-200 text-md">{name}</p>
+        <p className="swatch_text-primary text-xs">{count}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Artist;
diff --git a/components/TopArtists/TopArtists.jsx b/components/TopArtists/TopArtists.jsx
@@ -2,6 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 import { artists } from "../../data/data";
+import Artist from "../Artist/Artist";
 
 const TopArtists = () => {
   return (
@@ -15,25 +16,7 @@ const TopArtists = () => {
 
       <div className="flex items-center justify-between overflow-auto py-2">
         {artists.map((artist) => (
-          <div
-            className="flex flex-col items-center gap-2 hover:scale-105"
-            key={artist.name}
-          >
-            <div className="rounded-md w-max h-max overflow-hidden mx-2 cursor-pointer z-10">
-              <Image
-                src={artist.img}
-                alt={artist.name}
-                width={150}
-                height={150}
-                className="rounded-md w-full object-top"
-              />
-            </div>
-
-            <div className="flex-col items-center text-center">
-              <p className="text-gray-200 text-md">{artist.name}</p>
-              <p className="swatch_text-primary text-xs">{artist.count}</p>
-            </div>
-          </div>
+          <Artist name={artist.name} count={artist.count} img={artist.img} />
         ))}
       </div>
     </div>