Merge pull request #68 from G-Techs/refact-NewReleases

NewReleases component migrated to ts

components/LandingPage/LandingPage.tsx

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

components/modules/AdminDashboard/_modules/BestArtist/index.tsx

@@ -9,23 +9,23 @@ const BestArtist = () => {
       <h3 className="text-2xl font-semibold pb-5 border-b">Best Artist</h3>
       <div className="flex flex-col gap-3">
         <ArtistCard
-          artistAvatar={songs[0].image}
+          artistAvatar={songs[0].img}
           artistName={songs[0].artist}
           date="24 jan,2022"
           streams={numberConverter(400)}
           borderColorClassName="border-green-500"
           streamsBgClassName="bg-green-500"
         />
         <ArtistCard
-          artistAvatar={songs[1].image}
+          artistAvatar={songs[1].img}
           artistName={songs[1].artist}
           date="12 feb,2022"
           streams={numberConverter(500)}
           borderColorClassName="border-primary"
           streamsBgClassName="bg-primary"
         />
         <ArtistCard
-          artistAvatar={songs[2].image}
+          artistAvatar={songs[2].img}
           artistName={songs[2].artist}
           date="24 jul,2022"
           streams={numberConverter(350)}

components/modules/NewReleases/index.d.ts

@@ -0,0 +1,3 @@
+declare module '*.jpg';
+declare module '*.gif';
+declare module '*.png';

components/modules/NewReleases/index.tsx

@@ -0,0 +1,109 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { useState } from "react";
+import { songs } from "../utils/dummy";
+import { VDots, VPause, VPlay, VStar, VWave } from "../__modules__/_Vectors";
+import AudioPlayer from "../utils/config/audioPlayer";
+import liveBg from "../static/images/livebg.jpg";
+import equalizer from "../static/images/equalizer.gif";
+import { ISong } from "../../../types";
+
+const newRealeaseBg = {
+  backgroundImage: `url(${liveBg.src})`,
+  backgroundPosition: "center",
+  backgroundSize: "cover",
+  backgroundRepeat: "no-repeat",
+  borderRadius: "20px",
+};
+
+const NewReleases = () => {
+  const [isPlaying, setIsPlaying] = useState(-1);
+  const [isPaused, setIsPaused] = useState(false);
+  const [tracks, setTracks] = useState<ISong[]>(songs);
+
+  function playerControler(index:number){
+    return(
+      <div
+      onClick={() => {
+        if (isPlaying === index && !isPaused) {
+          setIsPaused(true);
+          setIsPlaying(index);
+        } else {
+          setIsPaused(false);
+        }
+        setIsPlaying(index);
+      }}
+      className="px-4"
+    >
+      {isPlaying === index && !isPaused ? (
+        <VPause className="w-6 h-6" />
+      ) : (
+        <VPlay className="w-6 h-6" />
+      )}
+    </div>
+    )
+  }
+  return (
+    <div
+      className="mt-20 mr-5 bg-white shadow-lg rounded-bl-[50px]"
+    >
+      <p className="text-2xl  py-5 px-5 bg-white text-gray-700 font-bold">
+        New Release
+      </p>
+      <div className="w-full relative overflow-hidden h-[32rem] rounded-bl-[50px] shadow-xl text-white">
+        <img
+          src={liveBg.src}
+          alt="live background"
+          className="absolute h-full w-full object-cover rounded-tr-[50px] rounded-bl-[50px]"
+        />
+        <div className="grid lg:grid-cols-2 grid-cols-1 h-full absolute w-full">
+          <div className="flex h-[8rem] flex-col justify-between lg:h-full ">
+            <div className="lg:w-[10rem] w-full flex justify-center mx-auto my-auto">
+              <img
+                src={equalizer.src}
+                className="w-[20rem] h-[20rem] object-cover"
+              />
+            </div>
+            <div className="lg:block hidden">
+              <div className="mx-2 py-1 ">
+                <AudioPlayer tracks={songs} />
+              </div>
+            </div>
+          </div>
+          <div className="w-full p-5 overflow-y-scroll no-scrollbar lg:mt-0 mt-6">
+            {songs.map((item, index) => {
+              return (
+                <div
+                  key={index}
+                  className={` ${
+                    isPlaying === index ? "bg-black bg-opacity-10" : ""
+                  } flex hover:bg-opacity-50 hover:placeholder:bg-black my-4 p-2 items-center justify-between rounded-md`}
+                >
+                  <div className="lg:w-20 lg:h-20 max-h-20 w-12 h-12 rounded-br-2xl rounded-tl-2xl overflow-hidden">
+                    <img
+                      src={item.img}
+                      className="object-cover"
+                      alt={item.title}
+                    />
+                  </div>
+                  <div className="flex flex-col ">
+                    <p className="lg:text-xl font-medium"> {item.title}</p>
+                    <p className="text-sm"> {item.artist}</p>
+                  </div>
+                  <div>
+                    <VStar className="w-6 h-6 lg:block hidden" />
+                  </div>
+                {playerControler(index)}
+                  <div>
+                    <VDots className="w-6 h-6 lg:block hidden text-[#d97706]" />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NewReleases;

components/modules/utils/config/audioControls.tsx

@@ -0,0 +1,54 @@
+import React, { FC } from "react";
+import { VPrev, VNext, VPlay, VPause } from "../../__modules__/_Vectors"
+interface AudioControlsProps{
+    isPlaying:boolean;
+    onPlayPauseClick:Function;
+    onPrevClick: Function;
+    onNextClick:Function;
+}
+
+const AudioControls: FC<AudioControlsProps> = ({
+    isPlaying,
+    onPlayPauseClick,
+    onPrevClick,
+    onNextClick
+}) => (
+    <div className="flex  justify-center p-4 space-x-9">
+        <button
+            type="button"
+            className="prev"
+            aria-label="Previous"
+            onClick={()=>onPrevClick}>
+            <VPrev className="w-12 h-12" />
+        </button>
+        {isPlaying ? (
+            <button
+                type="button"
+                className="pause"
+                onClick={() => onPlayPauseClick(false)}
+                aria-label="Pause"
+            >
+                <VPause className="w-12 h-12" />
+            </button>
+        ) : (
+            <button
+                type="button"
+                className="play"
+                onClick={() => onPlayPauseClick(true)}
+                aria-label="Play"
+            >
+                <VPlay className="w-12 h-12" />
+            </button>
+        )}
+        <button
+            type="button"
+            className="next"
+            aria-label="Next"
+            onClick={()=>onNextClick}
+        >
+            <VNext className="w-12 h-12" />
+        </button>
+    </div>
+);
+
+export default AudioControls;