tooltip songs

Author: atulsy9

qtify/src/components/Card/index.js

@@ -1,17 +1,46 @@
 import "./card.css";
+import { useState, useEffect } from "react";
+import Tooltip from "@mui/material/Tooltip";
 // eslint-disable-next-line import/no-anonymous-default-export
 export default ({ data, view }) => {
-  return (
-    <div className="card">
-      <img src={data.image} alt={data.title} className="card-img" />
-      <div className="card-innerCard">
-        {view ? (
-          <div className="followerCount">{data.likes} Likes</div>
-        ) : (
-          <div className="followerCount">{data.follows} Follows</div>
-        )}
+  const [noOfSongs, setnoOfSongs] = useState(0);
+  useEffect(() => {
+    if (data.songs) {
+      setnoOfSongs(data.songs.length);
+    }
+  }, []);
+  if (view) {
+    return (
+      <div className="card">
+        <img src={data.image} alt={data.title} className="card-img" />
+        <div className="card-innerCard">
+          {view ? (
+            <div className="followerCount">{data.likes} Likes</div>
+          ) : (
+            <div className="followerCount">{data.follows} Follows</div>
+          )}
+        </div>
+        <div className="title">{data.title}</div>
       </div>
-      <div className="title">{data.title}</div>
-    </div>
-  );
+    );
+  } else {
+    return (
+      <Tooltip
+        title={`${noOfSongs} Songs`}
+        placement="top"
+        className="card"
+        arrow
+      >
+        <img src={data.image} alt={data.title} className="card-img" />
+        <div className="card-innerCard">
+          {view ? (
+            <div className="followerCount">{data.likes} Likes</div>
+          ) : (
+            <div className="followerCount">{data.follows} Follows</div>
+          )}
+        </div>
+        <div className="title">{data.title}</div>
+      </Tooltip>
+    );
+  }
 };

qtify/src/components/Carousel/index.jsx

@@ -1,6 +1,7 @@
 import "./Carousel.css";
 import { Virtual, Navigation } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
+import Tooltip from "@mui/material/Tooltip";
 
 // Import Swiper styles
 import "swiper/css";
@@ -24,7 +25,9 @@ export default ({ data, id, view }) => {
       >
         {data.map((cardData) => (
           <SwiperSlide key={cardData.id}>
-            <Card data={cardData} view={view} />
+            <Tooltip title="Delete">
+              <Card data={cardData} view={view} />
+            </Tooltip>
           </SwiperSlide>
         ))}
       </Swiper>