feat: migrate albumPage

components/AlbumPage/index.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import liveBg from "../../components/modules/static/images/livebg.jpg";
+import equalizer from "../../components/modules/static/images/equalizer.gif";
+import { topSongsData } from "../dummy_data/topSongsData";
+import BottomPlayer from "../BottomPaler/BottomPalyer";
+import SongCard from "../modules/__modules__/Card/SongCard";
+import HotSongs from "../modules/HotSongs";
+import PageCard from "../modules/__modules__/Card/PageCard";
+
+const albumBg = {
+  backgroundImage: `url(${liveBg.src})`,
+  backgroundPosition: "center",
+  backgroundSize: "cover",
+  backgroundRepeat: "no-repeat",
+};
+
+const AlbumPage = () => {
+  const [isTopNav, setIsTopNav] = useState(false);
+  return (
+    <div className="bg-globalBg">
+      <PageCard setIsTopNav={setIsTopNav}>
+        <div
+          className={`flex mt-24 h-[30rem] mobile:h-fit relative mobile:flex-col transition-all ${
+            isTopNav && "mt-40"
+          }`}
+        >
+          <div
+            className="relative w-full rounded-tr-3xl rounded-bl-3xl flex flex-col"
+            style={albumBg}
+          >
+            <div className="flex items-center center text-white">
+              <img
+                src={topSongsData[2].img}
+                className="w-12 h-12 object-cover m-10 rounded-xl"
+              />
+              <div>
+                <p className="font-bold">{topSongsData[2].artist}</p>
+                <p className="text-xs">{topSongsData[2].title}</p>
+              </div>
+            </div>
+            <div className="flex justify-center items-center">
+              <img
+                src={equalizer.src}
+                className="w-[20rem] h-[20rem] object-cover"
+              />
+            </div>
+            <BottomPlayer isFixed={false} />
+          </div>
+          <div className="w-full flex flex-col md:flex-wrap ml-5 mobile:h-fit">
+            {topSongsData.map((song) => {
+              return <SongCard song={song} />;
+            })}
+          </div>
+        </div>
+        <HotSongs />
+      </PageCard>
+    </div>
+  );
+};
+
+export default AlbumPage;

components/modules/HotSongs/HotSongByLocation/index.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from "react";
+import { ISong } from "../../../../types";
+import Carousel from "../../__modules__/Carousel";
+
+interface HotSongByLocationProps {
+  data: ISong[];
+  location: string;
+}
+
+const HotSongsByLocation: FC<HotSongByLocationProps> = ({ data, location }) => {
+  return (
+    <Carousel
+      className="w-1/2 bg-white px-5 py-5 rounded-xl shadow-xl mobile:w-full mobile:mx-0"
+      title={`Hot Songs ${location}`}
+    >
+      {data.map((song) => {
+        const { id, title, img, artist } = song;
+        return (
+          <div
+            key={id}
+            className="flex flex-col px-2 w-1/2 my-5 items-center mobilesm:w-full scroll-snap-item"
+          >
+            <img
+              src={img}
+              alt={artist}
+              className="w-full object-cover h-48 rounded-xl"
+            />
+            <div className="py-5 text-center capitalize">
+              <p className="font-semibold text-base">{title}</p>
+              <p className="text-gray-400 text-base font-medium">{artist}</p>
+            </div>
+          </div>
+        );
+      })}
+    </Carousel>
+  );
+};
+
+export default HotSongsByLocation;

components/modules/HotSongs/HotSongsCard/index.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from "react";
+import { ISong } from "../../../../types";
+import SongCard from "../../__modules__/Card/SongCard";
+import Carousel from "../../__modules__/Carousel";
+
+interface HotSongsCardProps {
+  data: ISong[];
+}
+
+const HotSongsCard: FC<HotSongsCardProps> = ({ data }) => {
+  return (
+    <Carousel
+      className="w-1/2 bg-white  px-5 py-5 rounded-xl shadow-xl  mobile:w-full mobile:mx-0"
+      title="Hot Songs"
+    >
+      {data.map((song) => {
+        return <SongCard song={song} />;
+      })}
+    </Carousel>
+  );
+};
+
+export default HotSongsCard;

components/modules/HotSongs/index.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import { ISong } from "../../../types";
+import { topSongsData } from "../../dummy_data/topSongsData";
+import HotSongsByLocation from "./HotSongByLocation";
+import HotSongsCard from "./HotSongsCard";
+
+const HotSongs = () => {
+  const [data, setData] = useState<ISong[]>(topSongsData.slice(0, 12));
+  return (
+    <div className="flex mr-5 mobile:flex-col gap-8 mt-6 mb-24">
+      <HotSongsCard data={data} />
+      <HotSongsByLocation data={data} location={"in DRC"} />
+    </div>
+  );
+};
+
+export default HotSongs;

components/modules/__modules__/Card/SongCard.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from "react";
+import { ISong } from "../../../../types";
+
+interface SongCardProps {
+  song: ISong;
+}
+
+const SongCard: FC<SongCardProps> = ({ song }) => {
+  const { id, img, artist, title } = song;
+  return (
+    <div
+      key={id}
+      className="flex my-5 items-center w-1/2 mobilesm:w-full scroll-snap-item"
+    >
+      <img
+        src={img}
+        alt={artist}
+        className="w-14 object-cover h-14 rounded-tl-3xl rounded-full"
+      />
+      <div className="px-5 capitalize">
+        <p className="font-semibold text-lg">{title}</p>
+        <p className="text-gray-400 text-sm font-medium">{artist}</p>
+      </div>
+    </div>
+  );
+};
+
+export default SongCard;