Merge pull request #63 from G-Techs/refact-TopSongs-to-ts

TopSongs component migrated to ts

components/LandingPage/LandingPage.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import TopSongs from "../modules/TopSongs/TopSongs";
+// import HotSongs from "../modules/HotSongs";
+// import NewReleases from "../modules/NewReleases";
+// import PageCard from "../modules/__modules__/Card/PageCard";
+// import FeaturedAlbum from "../modules/FeaturedAlbum";
+
+const LandingPage = () => {
+  return (
+    <div className="bg-globalBg">
+      {/* <PageCard>
+        <NewReleases /> */}
+        <TopSongs />
+        {/* <FeaturedAlbum />
+        <HotSongs />
+      </PageCard>  */}
+    </div>
+  );
+};
+
+export default LandingPage;

components/dummy_data/topSongsData.ts

@@ -0,0 +1,86 @@
+export const topSongsData = [
+    {
+        id:1,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png",
+        title:"sabali",
+        artist:"Damian Marley"
+    },
+    {
+        id:2,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/02.png",
+        title:"Holly Mountain",
+        artist:"Bob Marley"
+    },
+    {
+        id:3,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/06.png",
+        title:"In My pocket",
+        artist:"Duro lite"
+    },
+    {
+        id:4,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png",
+        title:"Call away",
+        artist:"Charlie puth"
+    },
+    {
+        id:5,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/08.png",
+        title:"Go",
+        artist:"Tekno"
+    },
+    {
+        id:6,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/11.png",
+        title:"New york",
+        artist:"Alicia keys"
+    },
+    {
+        id:7,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/12.png",
+        title:"Got It On Me",
+        artist:"Summer Walker"
+    },
+    {
+        id:8,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png",
+        title:"sabali",
+        artist:"Damian Marley"
+    },
+    {
+        id:9,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/02.png",
+        title:"Holly Mountain",
+        artist:"Bob Marley"
+    },
+    {
+        id:10,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/06.png",
+        title:"In My pocket",
+        artist:"Duro lite"
+    },
+    {
+        id:11,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png",
+        title:"Call away",
+        artist:"Charlie puth"
+    },
+    {
+        id:12,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/08.png",
+        title:"Go",
+        artist:"Tekno"
+    },
+    {
+        id:13,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/11.png",
+        title:"New york",
+        artist:"Alicia keys"
+    },
+    {
+        id:14,
+        img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/12.png",
+        title:"Got It On Me",
+        artist:"Summer Walker"
+    },
+]

components/modules/TopSongs/TopSongs.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { topSongsData } from "../../dummy_data/topSongsData";
+import TopSongCard from "../__modules__/Card/TopSongCard";
+import { ViewMoreIcon } from "../__modules/Vectors";
+
+const TopSongs = () => {
+  const [data, setData] = useState(topSongsData.slice(0, 12));
+  const [readAll, setReadAll] = useState(false);
+
+  const viewMore = (e: any) => {
+    setData(topSongsData);
+    setReadAll(!readAll);
+    if (readAll === false) {
+      setData(topSongsData.slice(0, 12));
+    }
+  };
+
+  return (
+    <div className=" mt-6 bg-white shadow-xl p-4 pb-0 rounded-xl mr-5 flex flex-col">
+      <div className="flex justify-between items-center pb-4 border-b">
+        <h1 className="text-2xl font-bold p-2 px-5 bg-white text-gray-700">
+          Top Songs
+        </h1>
+        <p
+          className="flex justify-center items-center cursor-pointer text-primary text-md font-bold transition-all"
+          onClick={viewMore}
+        >
+          {readAll ? "View More" : "View less"}
+          <span className={`ml-1 ${!readAll && "rotate-90 transition-all"}`}>
+            <ViewMoreIcon />
+          </span>
+        </p>
+      </div>
+      <TopSongCard data={data}/>
+    </div>
+  );
+};
+
+export default TopSongs;