From fc7dc027cb62eeeecf351275a686fb02c25d5417 Mon Sep 17 00:00:00 2001
From: Jonath-z <jonathanzihindula95@gmail.com>
Date: Wed, 28 Dec 2022 10:43:08 +0200
Subject: [PATCH] feat: migrate latest

---
 components/LatestPage/index.jsx               | 19 ----
 components/LatestPage/index.tsx               | 19 ++++
 components/Maintenance/Maintenance.jsx        | 56 -----------
 components/Maintenance/Maintenance.tsx        | 69 +++++++++++++
 components/Maintenance/index.jsx              | 52 ----------
 components/Maintenance/index.tsx              | 67 +++++++++++++
 components/dummy_data/dailySalesData.js       | 30 ------
 components/dummy_data/dailySalesData.ts       | 30 ++++++
 components/modules/FeaturedAlbum/index.jsx    | 25 -----
 components/modules/FeaturedAlbum/index.tsx    | 25 +++++
 components/modules/Singers/index.jsx          | 96 -------------------
 components/modules/Singers/index.tsx          | 95 ++++++++++++++++++
 .../__modules__/Card/FeaturedAlbumCard.jsx    | 29 ------
 .../__modules__/Card/FeaturedAlbumCard.tsx    | 29 ++++++
 .../modules/__modules__/Card/PageCard.tsx     |  3 -
 tsconfig.json                                 | 10 +-
 16 files changed, 343 insertions(+), 311 deletions(-)
 delete mode 100644 components/LatestPage/index.jsx
 create mode 100644 components/LatestPage/index.tsx
 delete mode 100644 components/Maintenance/Maintenance.jsx
 create mode 100644 components/Maintenance/Maintenance.tsx
 delete mode 100644 components/Maintenance/index.jsx
 create mode 100644 components/Maintenance/index.tsx
 delete mode 100644 components/dummy_data/dailySalesData.js
 create mode 100644 components/dummy_data/dailySalesData.ts
 delete mode 100644 components/modules/FeaturedAlbum/index.jsx
 create mode 100644 components/modules/FeaturedAlbum/index.tsx
 delete mode 100644 components/modules/Singers/index.jsx
 create mode 100644 components/modules/Singers/index.tsx
 delete mode 100644 components/modules/__modules__/Card/FeaturedAlbumCard.jsx
 create mode 100644 components/modules/__modules__/Card/FeaturedAlbumCard.tsx

diff --git a/components/LatestPage/index.jsx b/components/LatestPage/index.jsx
deleted file mode 100644
index f1aed3c..0000000
--- a/components/LatestPage/index.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// import React from "react";
-// import HotSongs from "../modules/HotSongs";
-// import TopSongs from "../modules/TopSongs/TopSongs";
-// import PageCard from "../modules/__modules__/Card/PageCard";
-
-// const LatestPage = () => {
-//   return (
-//     <div className="bg-globalBg">
-//       <PageCard>
-//         <div className="mt-20">
-//           <TopSongs />
-//           <HotSongs />
-//         </div>
-//       </PageCard>
-//     </div>
-//   );
-// };
-
-// export default LatestPage;
diff --git a/components/LatestPage/index.tsx b/components/LatestPage/index.tsx
new file mode 100644
index 0000000..ac36330
--- /dev/null
+++ b/components/LatestPage/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import HotSongs from "../modules/HotSongs";
+import TopSongs from "../modules/TopSongs/TopSongs";
+import PageCard from "../modules/__modules__/Card/PageCard";
+
+const LatestPage = () => {
+  return (
+    <div className="bg-globalBg">
+      <PageCard setIsTopNav={() => null}>
+        <div className="mt-20">
+          <TopSongs />
+          <HotSongs />
+        </div>
+      </PageCard>
+    </div>
+  );
+};
+
+export default LatestPage;
diff --git a/components/Maintenance/Maintenance.jsx b/components/Maintenance/Maintenance.jsx
deleted file mode 100644
index 036dd27..0000000
--- a/components/Maintenance/Maintenance.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-// import React from 'react'
-// import { useRouter } from "next/router";
-// import {
-//     ExclamationCircle,
-//     LayoutTopLine,
-//     Clock
-// } from '../modules/__modules/Vectors/index'
-
-// const Maintenance = () => {
-//     const router = useRouter();
-
-//     return (
-//         <div className='flex flex-wrap min-h-screen items-center justify-center '>
-//             <div className=' max-w-6xl p-4'>
-//                 <div className=' flex flex-col items-center justify-center text-center ' >
-//                     <img src="https://templates.iqonic.design/muzik/html/images/error/02.png" alt="logo" className='sm:h-56 h-28  mb-6' />
-//                     <h1 className='font-extrabold text-4xl p-4'>We are Currently Performing Maintenance</h1>
-//                     <p className='font-lighter mb-4 p-2'>Please chack back sometime</p>
-//                 </div>
-//                 <div className='grid lg:grid-cols-3 gap-6 justify-center place-items-center text-center md:px-20'>
-
-//                     <div className=' rounded-lg p-4 m-1 md:w-full shadow-xl lg:shadow-2xl'>
-//                         <div className='px-4 py-2 flex flex-col justify-center items-center'>
-//                             <span className='text-primary '>
-//                                 < LayoutTopLine size={54} />
-//                             </span>
-//                             <h2 className='font-bold text-lg p-2'>Why is the Down</h2>
-//                             <p className='text-gray-600 font-light'>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
-//                         </div>
-//                     </div>
-//                     <div className=' rounded-lg p-4 m-1 md:w-full shadow-xl lg:shadow-2xl'>
-//                         <div className='px-4 py-2 flex flex-col justify-center items-center'>
-//                             <span className='text-primary '>
-//                                 <Clock size={54} />
-//                             </span>
-//                             <h2 className='font-bold text-lg p-2'>What is the Downtime?</h2>
-//                             <p className='text-gray-600 font-light'>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
-//                         </div>
-//                     </div>
-//                     <div className=' rounded-lg p-4 m-1 md:w-full shadow-xl lg:shadow-2xl'>
-//                         <div className='px-4 py-2 flex flex-col justify-center  items-center '>
-//                             <span className='text-primary'>
-//                                 <ExclamationCircle size={54} />
-//                             </span>
-//                             <h2 className='font-bold text-lg p-2'>Do you need Support?</h2>
-//                             <p className='text-gray-600 font-light'>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
-//                         </div>
-//                     </div>
-//                 </div>
-//             </div>
-
-//         </div>
-//     )
-// }
-
-// export default Maintenance
diff --git a/components/Maintenance/Maintenance.tsx b/components/Maintenance/Maintenance.tsx
new file mode 100644
index 0000000..a70e5e5
--- /dev/null
+++ b/components/Maintenance/Maintenance.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { useRouter } from "next/router";
+import {
+  ExclamationCircle,
+  LayoutTopLine,
+  Clock,
+} from "../modules/__modules/Vectors/index";
+
+const Maintenance = () => {
+  const router = useRouter();
+
+  return (
+    <div className="flex flex-wrap min-h-screen items-center justify-center ">
+      <div className=" max-w-6xl p-4">
+        <div className=" flex flex-col items-center justify-center text-center ">
+          <img
+            src="https://templates.iqonic.design/muzik/html/images/error/02.png"
+            alt="logo"
+            className="sm:h-56 h-28  mb-6"
+          />
+          <h1 className="font-extrabold text-4xl p-4">
+            We are Currently Performing Maintenance
+          </h1>
+          <p className="font-lighter mb-4 p-2">Please chack back sometime</p>
+        </div>
+        <div className="grid lg:grid-cols-3 gap-6 justify-center place-items-center text-center md:px-20">
+          <div className=" rounded-lg p-4 m-1 md:w-full shadow-xl lg:shadow-2xl">
+            <div className="px-4 py-2 flex flex-col justify-center items-center">
+              <span className="text-primary ">
+                <LayoutTopLine size={54} />
+              </span>
+              <h2 className="font-bold text-lg p-2">Why is the Down</h2>
+              <p className="text-gray-600 font-light">
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+              </p>
+            </div>
+          </div>
+          <div className=" rounded-lg p-4 m-1 md:w-full shadow-xl lg:shadow-2xl">
+            <div className="px-4 py-2 flex flex-col justify-center items-center">
+              <span className="text-primary ">
+                <Clock size={54} />
+              </span>
+              <h2 className="font-bold text-lg p-2">What is the Downtime?</h2>
+              <p className="text-gray-600 font-light">
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+              </p>
+            </div>
+          </div>
+          <div className=" rounded-lg p-4 m-1 md:w-full shadow-xl lg:shadow-2xl">
+            <div className="px-4 py-2 flex flex-col justify-center  items-center ">
+              <span className="text-primary">
+                <ExclamationCircle size={54} />
+              </span>
+              <h2 className="font-bold text-lg p-2">Do you need Support?</h2>
+              <p className="text-gray-600 font-light">
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Maintenance;
diff --git a/components/Maintenance/index.jsx b/components/Maintenance/index.jsx
deleted file mode 100644
index f4f631c..0000000
--- a/components/Maintenance/index.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-// import React from 'react'
-// import {
-//     ExclamationCircle,
-//     LayoutTopLine,
-//     Clock
-// } from '../modules/__modules/Vectors/index';
-// import MaintenanceImg from '../modules/static/images/MaintenanceGuy,png'
-// const Index = () => {
-
-//     return (
-//         <div className="flex flex-wrap min-h-screen items-center justify-center">
-//             <div className=' max-w-6xl p-4'>
-//                 <div className="flex flex-col items-center justify-center text-center">
-//                     <img src={MaintenanceImg} alt="logo" className="sm:h-56 h-28  mb-6" />
-//                     <h1 className='font-extrabold text-4xl p-4'>We are Currently Performing Maintenance</h1>
-//                     <p className='font-lighter mb-4 p-2'>Please chack back sometime</p>
-//                 </div>
-//                 <div className="grid lg:grid-cols-3 gap-6 justify-center place-items-center text-center md:px-20">
-//                     <div className="card">
-//                         <div className="px-4 py-2 flex flex-col justify-center items-center">
-//                             <span className="text-primary">
-//                                 < LayoutTopLine size={54} />
-//                             </span>
-//                             <h2 className="font-bold text-lg p-2">Why is the Down</h2>
-//                             <p className="text-gray-600 font-light">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
-//                         </div>
-//                     </div>
-//                     <div className="card">
-//                         <div className="px-4 py-2 flex flex-col justify-center items-center">
-//                             <span className="text-primary">
-//                                 <Clock size={54} />
-//                             </span>
-//                             <h2 className="font-bold text-lg p-2">What is the Downtime?</h2>
-//                             <p className="text-gray-600 font-light">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
-//                         </div>
-//                     </div>
-//                     <div className="card">
-//                         <div className="px-4 py-2 flex flex-col justify-center  items-center">
-//                             <span className="text-primary">
-//                                 <ExclamationCircle size={54} />
-//                             </span>
-//                             <h2 className="font-bold text-lg p-2">Do you need Support?</h2>
-//                             <p className="text-gray-600 font-light">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
-//                         </div>
-//                     </div>
-//                 </div>
-//             </div>
-//         </div>
-//     )
-// }
-
-// export default Index
diff --git a/components/Maintenance/index.tsx b/components/Maintenance/index.tsx
new file mode 100644
index 0000000..bc417df
--- /dev/null
+++ b/components/Maintenance/index.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  ExclamationCircle,
+  LayoutTopLine,
+  Clock,
+} from "../modules/__modules/Vectors/index";
+import MaintenanceImg from "../modules/static/images/MaintenanceGuy.png";
+
+const Index = () => {
+  return (
+    <div className="flex flex-wrap min-h-screen items-center justify-center">
+      <div className=" max-w-6xl p-4">
+        <div className="flex flex-col items-center justify-center text-center">
+          <img
+            src={MaintenanceImg.src}
+            alt="logo"
+            className="sm:h-56 h-28  mb-6"
+          />
+          <h1 className="font-extrabold text-4xl p-4">
+            We are Currently Performing Maintenance
+          </h1>
+          <p className="font-lighter mb-4 p-2">Please chack back sometime</p>
+        </div>
+        <div className="grid lg:grid-cols-3 gap-6 justify-center place-items-center text-center md:px-20">
+          <div className="card">
+            <div className="px-4 py-2 flex flex-col justify-center items-center">
+              <span className="text-primary">
+                <LayoutTopLine size={54} />
+              </span>
+              <h2 className="font-bold text-lg p-2">Why is the Down</h2>
+              <p className="text-gray-600 font-light">
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+              </p>
+            </div>
+          </div>
+          <div className="card">
+            <div className="px-4 py-2 flex flex-col justify-center items-center">
+              <span className="text-primary">
+                <Clock size={54} />
+              </span>
+              <h2 className="font-bold text-lg p-2">What is the Downtime?</h2>
+              <p className="text-gray-600 font-light">
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+              </p>
+            </div>
+          </div>
+          <div className="card">
+            <div className="px-4 py-2 flex flex-col justify-center  items-center">
+              <span className="text-primary">
+                <ExclamationCircle size={54} />
+              </span>
+              <h2 className="font-bold text-lg p-2">Do you need Support?</h2>
+              <p className="text-gray-600 font-light">
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Index;
diff --git a/components/dummy_data/dailySalesData.js b/components/dummy_data/dailySalesData.js
deleted file mode 100644
index ba20f5b..0000000
--- a/components/dummy_data/dailySalesData.js
+++ /dev/null
@@ -1,30 +0,0 @@
-// export const dailySalesData = [
-//     {
-//         id:1,
-//         img:"https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png",
-//         title:"sabali",
-//         artist:"Damian Marley",
-//         amount: 83
-//     },
-//     {
-//         id:2,
-//         img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/02.png",
-//         title:"Holly Mountain",
-//         artist:"Bob Marley",
-//         amount: 83
-//     },
-//     {
-//         id:3,
-//         img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/06.png",
-//         title:"In My pocket",
-//         artist:"Duro lite",
-//         amount: 83
-//     },
-//     {
-//         id:4,
-//         img:"https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png",
-//         title:"Call away",
-//         artist:"Charlie puth",
-//         amount: 83
-//     }
-// ]
diff --git a/components/dummy_data/dailySalesData.ts b/components/dummy_data/dailySalesData.ts
new file mode 100644
index 0000000..0ffdf13
--- /dev/null
+++ b/components/dummy_data/dailySalesData.ts
@@ -0,0 +1,30 @@
+export const dailySalesData = [
+  {
+    id: 1,
+    img: "https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png",
+    title: "sabali",
+    artist: "Damian Marley",
+    amount: 83,
+  },
+  {
+    id: 2,
+    img: "https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/02.png",
+    title: "Holly Mountain",
+    artist: "Bob Marley",
+    amount: 83,
+  },
+  {
+    id: 3,
+    img: "https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/06.png",
+    title: "In My pocket",
+    artist: "Duro lite",
+    amount: 83,
+  },
+  {
+    id: 4,
+    img: "https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png",
+    title: "Call away",
+    artist: "Charlie puth",
+    amount: 83,
+  },
+];
diff --git a/components/modules/FeaturedAlbum/index.jsx b/components/modules/FeaturedAlbum/index.jsx
deleted file mode 100644
index 0fb5885..0000000
--- a/components/modules/FeaturedAlbum/index.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-// import React, { useState } from "react";
-// import FeaturedAlbumCard from "../__modules__/Card/FeaturedAlbumCard";
-// import Carousel from "../__modules__/Carousel";
-// import { topSongsData } from "../../dummy_data/topSongsData";
-
-// const FeaturedAlbum = () => {
-//   const [data, _] = useState(topSongsData.slice(0, 6));
-//   return (
-//     <Carousel
-//       height={360}
-//       title="Featured Albums"
-//       className="mt-8 p-4 rounded-lg shadow-lg mr-4 bg-white"
-//     >
-//       {data.map((song) => {
-//         return (
-//           <>
-//             <FeaturedAlbumCard album={song} />
-//           </>
-//         );
-//       })}
-//     </Carousel>
-//   );
-// };
-
-// export default FeaturedAlbum;
diff --git a/components/modules/FeaturedAlbum/index.tsx b/components/modules/FeaturedAlbum/index.tsx
new file mode 100644
index 0000000..a777559
--- /dev/null
+++ b/components/modules/FeaturedAlbum/index.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import FeaturedAlbumCard from "../__modules__/Card/FeaturedAlbumCard";
+import Carousel from "../__modules__/Carousel";
+import { topSongsData } from "../../dummy_data/topSongsData";
+
+const FeaturedAlbum = () => {
+  const [data, _] = useState(topSongsData.slice(0, 6));
+  return (
+    <Carousel
+      height={360}
+      title="Featured Albums"
+      className="mt-8 p-4 rounded-lg shadow-lg mr-4 bg-white"
+    >
+      {data.map((song) => {
+        return (
+          <>
+            <FeaturedAlbumCard album={song} />
+          </>
+        );
+      })}
+    </Carousel>
+  );
+};
+
+export default FeaturedAlbum;
diff --git a/components/modules/Singers/index.jsx b/components/modules/Singers/index.jsx
deleted file mode 100644
index ea20675..0000000
--- a/components/modules/Singers/index.jsx
+++ /dev/null
@@ -1,96 +0,0 @@
-// import React from "react";
-// import { VPen, VTrash } from "../__modules/Vectors";
-// import Link from "next/link";
-// import PropTypes from "prop-types";
-
-// const Singers = ({ isTopNav }) => {
-//   return (
-//     <div
-//       className={`my-24 bg-white flex flex-col mr-5 border shadow-lg rounded-lg  ${
-//         isTopNav && "my-40"
-//       } transition-all`}
-//     >
-//       <div className="flex justify-between items-center px-5 py-5 border-b border-gray-200">
-//         <h3 className="font-bold text-2xl">Singer Lists</h3>
-//         <Link href="/admin/addnewsong">
-//           <button className="bg-primary text-white px-4 py-2 rounded-2xl mobilesm:text-xs">
-//             Add New Singer
-//           </button>
-//         </Link>
-//       </div>
-//       <div className="flex mobilesm:flex-col mobilesm:gap-3 justify-between px-5 py-5">
-//         <div className="flex items-center">
-//           <label htmlFor="numberOfItem">Show</label>
-//           <select
-//             name="numberOfItem"
-//             className="px-2 mx-2 rounded-md outline-none border bg-transparent focus:border-primary transition-all"
-//           >
-//             <option value={10}>10</option>
-//             <option value={25}>25</option>
-//             <option value={50}>50</option>
-//             <option value={100}>100</option>
-//           </select>
-//           <p>entries</p>
-//         </div>
-//         <div className="mobilesm:flex flex-col">
-//           <label htmlFor="searchItem" className="px-4 mobilesm:px-0">
-//             Search:
-//           </label>
-//           <input
-//             type="search"
-//             name="searchItem"
-//             className="border border-gray-300 px-2 py-1 rounded-md outline-none focus:border-primary transition-all"
-//           />
-//         </div>
-//       </div>
-//       <div className="m-5 overflow-x-auto">
-//         <table className="border border-gray-300 w-full">
-//           <tbody>
-//             <tr>
-//               <th className="border px-10 py-3">No</th>
-//               <th className="border px-10 py-3">Profile</th>
-//               <th className="border px-10 py-3">Email</th>
-//               <th className="border px-10 py-3">Song Description</th>
-//               <th className="border px-10 py-3">Action</th>
-//             </tr>
-//             {Array.from({ length: 10 }).map((_, index) => {
-//               return (
-//                 <tr key={index}>
-//                   <td className="border px-5 py-5">{index + 1}</td>
-//                   <td className="border mx-0 flex justify-center items-center">
-//                     <img
-//                       src="https://templates.iqonic.design/muzik/html/images/user/04.jpg"
-//                       className="w-16 h-16 m-2 rounded-2xl"
-//                       alt={index}
-//                     />
-//                   </td>
-//                   <td className="border px-5">galiendcodes13@gmail.com</td>
-//                   <td className="border px-5">
-//                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
-//                     Laborum, quasi.
-//                   </td>
-//                   <td className="border px-5">
-//                     <div className="flex justify-center items-center">
-//                       <button className="bg-primary p-2 rounded-lg text-white">
-//                         <VPen />
-//                       </button>
-//                       <button className="bg-primary p-2 rounded-lg text-white mx-2">
-//                         <VTrash />
-//                       </button>
-//                     </div>
-//                   </td>
-//                 </tr>
-//               );
-//             })}
-//           </tbody>
-//         </table>
-//       </div>
-//     </div>
-//   );
-// };
-
-// Singers.propTypes = {
-//   isTopNav: PropTypes.bool.isRequired,
-// };
-
-// export default Singers;
diff --git a/components/modules/Singers/index.tsx b/components/modules/Singers/index.tsx
new file mode 100644
index 0000000..14bd4bc
--- /dev/null
+++ b/components/modules/Singers/index.tsx
@@ -0,0 +1,95 @@
+import React, { FC } from "react";
+import { VPen, VTrash } from "../__modules/Vectors";
+import Link from "next/link";
+
+interface SingersProps {
+  isTopNav: boolean;
+}
+
+const Singers: FC<SingersProps> = ({ isTopNav }) => {
+  return (
+    <div
+      className={`my-24 bg-white flex flex-col mr-5 border shadow-lg rounded-lg  ${
+        isTopNav && "my-40"
+      } transition-all`}
+    >
+      <div className="flex justify-between items-center px-5 py-5 border-b border-gray-200">
+        <h3 className="font-bold text-2xl">Singer Lists</h3>
+        <Link href="/admin/addnewsong">
+          <button className="bg-primary text-white px-4 py-2 rounded-2xl mobilesm:text-xs">
+            Add New Singer
+          </button>
+        </Link>
+      </div>
+      <div className="flex mobilesm:flex-col mobilesm:gap-3 justify-between px-5 py-5">
+        <div className="flex items-center">
+          <label htmlFor="numberOfItem">Show</label>
+          <select
+            name="numberOfItem"
+            className="px-2 mx-2 rounded-md outline-none border bg-transparent focus:border-primary transition-all"
+          >
+            <option value={10}>10</option>
+            <option value={25}>25</option>
+            <option value={50}>50</option>
+            <option value={100}>100</option>
+          </select>
+          <p>entries</p>
+        </div>
+        <div className="mobilesm:flex flex-col">
+          <label htmlFor="searchItem" className="px-4 mobilesm:px-0">
+            Search:
+          </label>
+          <input
+            type="search"
+            name="searchItem"
+            className="border border-gray-300 px-2 py-1 rounded-md outline-none focus:border-primary transition-all"
+          />
+        </div>
+      </div>
+      <div className="m-5 overflow-x-auto">
+        <table className="border border-gray-300 w-full">
+          <tbody>
+            <tr>
+              <th className="border px-10 py-3">No</th>
+              <th className="border px-10 py-3">Profile</th>
+              <th className="border px-10 py-3">Email</th>
+              <th className="border px-10 py-3">Song Description</th>
+              <th className="border px-10 py-3">Action</th>
+            </tr>
+            {Array.from({ length: 10 }).map((_, index) => {
+              return (
+                <tr key={index}>
+                  <td className="border px-5 py-5">{index + 1}</td>
+                  <td className="border mx-0 flex justify-center items-center">
+                    <img
+                      src="https://templates.iqonic.design/muzik/html/images/user/04.jpg"
+                      className="w-16 h-16 m-2 rounded-2xl"
+                      alt={`${index}_singer`}
+                    />
+                  </td>
+                  <td className="border px-5">galiendcodes13@gmail.com</td>
+                  <td className="border px-5">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Laborum, quasi.
+                  </td>
+                  <td className="border px-5">
+                    <div className="flex justify-center items-center">
+                      <button className="bg-primary p-2 rounded-lg text-white">
+                        <VPen />
+                      </button>
+                      <button className="bg-primary p-2 rounded-lg text-white mx-2">
+                        <VTrash />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Singers;
diff --git a/components/modules/__modules__/Card/FeaturedAlbumCard.jsx b/components/modules/__modules__/Card/FeaturedAlbumCard.jsx
deleted file mode 100644
index cccfaf0..0000000
--- a/components/modules/__modules__/Card/FeaturedAlbumCard.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// import React from "react";
-// import PropTypes from "prop-types";
-
-// const FeaturedAlbumCard = ({ album }) => {
-//   return (
-//     <div className="w-80 py-4 pr-4">
-//       <div className="border rounded-bl-3xl rounded-tr-3xl h-50">
-//         <div className="flex flex-col justify-center items-center">
-//           <img
-//             src={album.img}
-//             alt={album.artist}
-//             className="rounded-bl-3xl rounded-tr-3xl  w-full object-cover h-60 md:min-h-32"
-//           />
-//         </div>
-
-//         <div className="flex flex-col justify-center items-center p-4 capitalize">
-//           <h1 className="text-gray-800 font-semibold ">{album.title}</h1>
-//           <h2 className="text-gray-400  font-medium ">{album.artist}</h2>
-//         </div>
-//       </div>
-//     </div>
-//   );
-// };
-
-// FeaturedAlbumCard.propTypes = {
-//   album: PropTypes.object.isRequired,
-// };
-
-// export default FeaturedAlbumCard;
diff --git a/components/modules/__modules__/Card/FeaturedAlbumCard.tsx b/components/modules/__modules__/Card/FeaturedAlbumCard.tsx
new file mode 100644
index 0000000..71a299b
--- /dev/null
+++ b/components/modules/__modules__/Card/FeaturedAlbumCard.tsx
@@ -0,0 +1,29 @@
+import React, { FC } from "react";
+import { ISong } from "../../../../types";
+
+interface FeaturedAlbumCardProps {
+  album: ISong;
+}
+
+const FeaturedAlbumCard: FC<FeaturedAlbumCardProps> = ({ album }) => {
+  return (
+    <div className="w-80 py-4 pr-4">
+      <div className="border rounded-bl-3xl rounded-tr-3xl h-50">
+        <div className="flex flex-col justify-center items-center">
+          <img
+            src={album.img}
+            alt={album.artist}
+            className="rounded-bl-3xl rounded-tr-3xl  w-full object-cover h-60 md:min-h-32"
+          />
+        </div>
+
+        <div className="flex flex-col justify-center items-center p-4 capitalize">
+          <h1 className="text-gray-800 font-semibold ">{album.title}</h1>
+          <h2 className="text-gray-400  font-medium ">{album.artist}</h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeaturedAlbumCard;
diff --git a/components/modules/__modules__/Card/PageCard.tsx b/components/modules/__modules__/Card/PageCard.tsx
index 8eb87cd..864eec6 100644
--- a/components/modules/__modules__/Card/PageCard.tsx
+++ b/components/modules/__modules__/Card/PageCard.tsx
@@ -1,4 +1,3 @@
-
 import React, { Dispatch, FC, SetStateAction } from "react";
 import { useRecoilValue } from "recoil";
 import { leftNavPinedAtom } from "../../../lib/atoms";
@@ -11,7 +10,6 @@ interface IProps {
 }
 
 const PageCard: FC<IProps> = ({ children, setIsTopNav }) => {
-
   const isLeftNavPined = useRecoilValue(leftNavPinedAtom);
   return (
     <>
@@ -19,7 +17,6 @@ const PageCard: FC<IProps> = ({ children, setIsTopNav }) => {
         className={`relative flex flex-col ${
           !isLeftNavPined ? "ml-28 transition-all" : "transition-all ml-72"
         } mobile:ml-5`}
-
       >
         <TopNav setIsTopNav={setIsTopNav} />
         {children}
diff --git a/tsconfig.json b/tsconfig.json
index ec72e7c..421d2ae 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,14 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "components/modules/__modules__/_Vectors/wavePlayVector.jsx", "components/modules/AddNewSinger/index.tsx"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "components/modules/__modules__/_Vectors/wavePlayVector.jsx",
+    "components/modules/AddNewSinger/index.tsx",
+    "components/modules/utils/config/audioPlayer.jsx",
+    "components/modules/utils/config/audioControls.jsx"
+  ],
   "exclude": ["node_modules"]
 }