From f360a8d904ca3482e7d841a63208ee8be7fc5be9 Mon Sep 17 00:00:00 2001
From: Derick1530 <DerickZIHALIRWA07@gmail.com>
Date: Fri, 30 Dec 2022 22:30:03 +0300
Subject: [PATCH 1/2] song focus on select

---
 components/modules/NewReleases/index.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/components/modules/NewReleases/index.tsx b/components/modules/NewReleases/index.tsx
index 86345ae..731ad8c 100644
--- a/components/modules/NewReleases/index.tsx
+++ b/components/modules/NewReleases/index.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { songs } from "../utils/dummy";
 import { VDots, VStar } from "../__modules__/_Vectors";
 import AudioPlayer from "../utils/config/audioPlayer";
@@ -8,12 +8,16 @@ import liveBg from "../static/images/livebg.jpg";
 import Equalizer from "./Equalizer";
 import { ISong } from "../../../types";
 import PlayerController from "./PlayerController";
+import { type } from "os";
 
 const NewReleases = () => {
   const [isPlaying, setIsPlaying] = useState(-1);
   const [isPaused, setIsPaused] = useState(false);
   const [tracks, setTracks] = useState<ISong[]>(songs);
 
+  const offsetH= useRef<HTMLDivElement>(null);
+  const clientH= useRef<HTMLDivElement>(null);
+
   return (
     <div className="mt-20 mr-5 bg-white shadow-lg rounded-bl-[3.125rem]">
       <p className="text-2xl py-5 px-5 bg-white text-gray-700 font-bold">
@@ -40,12 +44,20 @@ const NewReleases = () => {
               </div>
             </div>
           </div>
-          <div className="m-5 overflow-y-hidden lg:mt-0 mt-6">
+          <div ref={offsetH}  className="m-5 overflow-y-scroll scroll-smooth no-scrollbar lg:mt-0 mt-6">
             {songs.map((item, index) => {
               return (
-                <div
+              <div
                   key={index}
-                  onClick={() => setIsPlaying(index)}
+                  ref={clientH}
+                  // this behavior scroll the selected element to the top of the parent div.
+                  onClick={() => {
+                    if(offsetH.current){
+                      offsetH.current.scrollTop = 90 *index
+                    }
+                    setIsPlaying(index)}
+                  
+                }
                   className={`flex cursor-pointer hover:bg-opacity-50 hover:placeholder:bg-black my-4 p-2 items-center justify-between rounded-md ${
                     isPlaying === index ? "bg-black/40 backdrop-blur-md" : ""
                   }`}

From 9f3665d26d2632819cea68672c4cc84df0069ceb Mon Sep 17 00:00:00 2001
From: Derick1530 <DerickZIHALIRWA07@gmail.com>
Date: Fri, 30 Dec 2022 23:14:06 +0300
Subject: [PATCH 2/2] selected song push to the top

---
 components/modules/NewReleases/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/modules/NewReleases/index.tsx b/components/modules/NewReleases/index.tsx
index 731ad8c..844d32a 100644
--- a/components/modules/NewReleases/index.tsx
+++ b/components/modules/NewReleases/index.tsx
@@ -50,7 +50,7 @@ const NewReleases = () => {
               <div
                   key={index}
                   ref={clientH}
-                  // this behavior scroll the selected element to the top of the parent div.
+                  // this behavior scroll the selected element to the top of the parent div
                   onClick={() => {
                     if(offsetH.current){
                       offsetH.current.scrollTop = 90 *index