Merge pull request #64 from G-Techs/refact-NavBar-to-ts

NavBar migrated to ts

components/AddNewSongPage/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { useState } from "react";
+import AddNewSinger from "../modules/AddNewSinger";
+
+import PageCard from "../modules/__modules__/Card/PageCard";
+
+const AddNewSongPage = () => {
+  const [isTopNav, setIsTopNav] = useState(false);
+  return (
+    <PageCard setIsTopNav={setIsTopNav}>
+      <AddNewSinger />
+    </PageCard>
+  );
+};
+export default AddNewSongPage;

components/BottomPaler/BottomPalyer.tsx

@@ -9,7 +9,6 @@ import {
 } from "../modules/__modules/Vectors";
 import { VNext, VPlay, VPrev } from "../modules/__modules__/_Vectors";
 import Slider from "@mui/material/Slider";
-
 interface IProps {
   isFixed?: boolean;
 }

components/LandingPage/LandingPage.tsx

@@ -1,19 +1,21 @@
-import React from "react";
+import React, { useState } 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 PageCard from "../modules/__modules__/Card/PageCard";
 // import FeaturedAlbum from "../modules/FeaturedAlbum";
 
 const LandingPage = () => {
+  const [isTopNav, setIsTopNav] = React.useState(false);
+
   return (
     <div className="bg-globalBg">
-      {/* <PageCard>
-        <NewReleases /> */}
+    <PageCard setIsTopNav={setIsTopNav} >
+      {/*   <NewReleases /> */}
         <TopSongs />
         {/* <FeaturedAlbum />
-        <HotSongs />
-      </PageCard>  */}
+        <HotSongs />*/}
+      </PageCard>  
     </div>
   );
 };

components/lib/atoms/index.ts

@@ -12,7 +12,9 @@ const leftNavPinedAtom = atom<boolean>({
   default: false,
 });
 
+
 const displaySettingsModalAtom = atom<boolean>({
+
   key: "displaysettingsModalAtom",
   default: false,
 });

components/modules/AccountSettings/index.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from "react";
-
 interface IProps {
   isTopNav: boolean;
 }

components/modules/AddNewSinger/index.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+
+const AddNewSinger = () => {
+  return (
+    <>
+      <div className="my-24 mobile:mb-32 bg-white flex flex-col shadow-lg mr-5 rounded-xl pt-2">
+        <div className="flex justify-between items-center pb-5 border-b">
+          <h2 className="font-bold text-2xl text-gray-700 pl-5 pt-3">
+            Add New singer
+          </h2>
+        </div>
+        <form className="flex flex-col px-2 py-4 gap-2">
+          <div className="flex flex-col px-2 w-full">
+            <label htmlFor="singer-name" className="pb-2">
+              singer name
+            </label>
+            <input
+              type="text"
+              name="singer-name"
+              className="bg-transparent border  px-3 transition-all py-2 rounded-md outline-none"
+            />
+          </div>
+          <div className="flex flex-col px-2 w-full">
+            <label htmlFor="profile" className="pb-2">
+              Singer Profile:
+            </label>
+            <input
+              type="file"
+              name="profile"
+              className="
+                flex
+                file:mr-4 file:py-2 file:px-4
+                file:rounded-full file:border-0
+                file:text-sm file:font-semibold
+                file:bg-primary file:text-gray-100
+                hover:file:text-primary
+                hover:file:bg-gray-100
+                hover:file:shadow-lg
+                bg-transparent border  px-3 transition-all py-2 rounded-md outline-none"
+            />
+          </div>
+          <div className="flex flex-col px-2 w-full">
+            <label htmlFor="email" className="pb-2">
+              singer email
+            </label>
+            <input
+              type="email"
+              name="email"
+              className="bg-transparent border  px-3 transition-all py-2 rounded-md outline-none"
+            />
+          </div>
+          <div className="flex flex-col px-2 ">
+            <label htmlFor="category-name" className="py-2">
+              Singer Description:
+            </label>
+            <textarea
+              name="category-name"
+              cols={20}
+              rows={6}
+              className="bg-transparent border  px-3 transition-all py-4 rounded-md outline-none"
+            />
+          </div>
+          <div className="flex capitalize right gap-4 px-2">
+            <button className="bg-primary w-20 px-2 py-2 rounded-xl text-white font-medium ">
+              submit
+            </button>
+            <button
+              type="reset"
+              className="bg-orange-600 w-20 px-2 py-2 rounded-xl text-white font-medium "
+            >
+              reset
+            </button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+};
+
+
+export default AddNewSinger;

components/modules/NavBar/LeftNav/AdminMenu/index.tsx

@@ -1,13 +1,13 @@
 import React, { FC } from "react";
 import { AdminIcon, ChevronRightIcon } from "../../../__modules/Vectors";
 import AdminSubmenu from "./AdminSubmenu";
-
 interface IProps {
   isAdminSubmenu: boolean;
   toggleSubmenu: (menuType: string) => void;
 }
 
 const AdminMenu: FC<IProps> = ({ isAdminSubmenu, toggleSubmenu }) => {
+
   return (
     <div className="py-5">
       <div

components/modules/NavBar/LeftNav/DashBoard/index.tsx

@@ -1,13 +1,12 @@
 import React, { FC } from "react";
 import { ChevronRightIcon, HomeIcon } from "../../../__modules/Vectors";
 import DashboardMenu from "./DashboardMenu";
-
 interface IProps {
   isDashboardSubmenu: boolean;
   toggleSubmenu: (menuType: string) => void;
 }
-
 const DashBord: FC<IProps> = ({ isDashboardSubmenu, toggleSubmenu }) => {
+
   return (
     <div>
       <div

components/modules/NavBar/LeftNav/NavContentIcons/index.tsx

@@ -9,7 +9,6 @@ import {
   FavoriteIcon,
   AdminIcon,
 } from "../../../__modules/Vectors";
-
 interface IProps {
   isMouseOverLeftNav: boolean;
 }

components/modules/NavBar/LeftNav/index.tsx

@@ -20,8 +20,8 @@ const LeftNav = () => {
   const toggleTheme = () => {
     setIsDarkMode(!isDarkMode);
   };
-
   const toggleSubmenu = (menuName: string) => {
+
     menuName === "dashboard"
       ? setIsSubMenu({
           isAdminSubmenu: false,

components/modules/NavBar/TopNav/__modules/ProfileMenuModal/index.tsx

@@ -21,6 +21,7 @@ const ProfileMenuModal = () => {
             <ProfileSheetIcon className="text-primary" />
           </div>
           <div className="px-5 flex flex-col w-full">
+
             <div
               className="px-5 flex flex-col w-full"
               onClick={() => router.push("/account/profile")}

components/modules/NavBar/TopNav/index.tsx

@@ -1,3 +1,4 @@
+
 /* eslint-disable @next/next/no-img-element */
 import React, { Dispatch, SetStateAction, useState, FC } from "react";
 import {
@@ -8,6 +9,7 @@ import {
   SeachIcon,
   ChevronRightIcon,
 } from "../../__modules/Vectors";
+
 import { openMenuAtom } from "../../../lib/atoms";
 import { useRecoilState } from "recoil";
 import NotificationModal from "./__modules/NotificationModal";
@@ -19,6 +21,7 @@ interface IProps {
 }
 
 const TopNav: FC<IProps> = ({ setIsTopNav }) => {
+
   const [isTopMenu, setIsTopMenu] = useState(false);
   const [isMenuOpened, setIsMenuOpened] = useRecoilState(openMenuAtom);
   const [isNotificationModal, setIsNotificationModal] = useState(false);
@@ -139,5 +142,4 @@ const TopNav: FC<IProps> = ({ setIsTopNav }) => {
     </>
   );
 };
-
 export default TopNav;

components/modules/__modules__/Card/PageCard.tsx

@@ -1,3 +1,4 @@
+
 import React, { Dispatch, FC, SetStateAction } from "react";
 import { useRecoilValue } from "recoil";
 import { leftNavPinedAtom } from "../../../lib/atoms";
@@ -10,13 +11,15 @@ interface IProps {
 }
 
 const PageCard: FC<IProps> = ({ children, setIsTopNav }) => {
+
   const isLeftNavPined = useRecoilValue(leftNavPinedAtom);
   return (
     <>
       <div
         className={`relative flex flex-col ${
           !isLeftNavPined ? "ml-28 transition-all" : "transition-all ml-72"
         } mobile:ml-5`}
+
       >
         <TopNav setIsTopNav={setIsTopNav} />
         {children}

components/modules/__modules__/_Vectors/index.jsx

@@ -0,0 +1,9 @@
+import { GiHamburgerMenu as VHamburger } from 'react-icons/gi';
+import { BiDotsVerticalRounded as VDots } from "react-icons/bi"
+import { FaPlay as VPlay } from 'react-icons/fa'
+import { BsPauseCircleFill as VPause } from 'react-icons/bs'
+import { IoStarOutline as VStar } from 'react-icons/io5'
+import { ImNext as VNext } from 'react-icons/im';
+import { ImPrevious as VPrev } from 'react-icons/im'
+import VWave from './wavePlayVector';
+export { VHamburger, VDots, VWave, VPrev, VNext, VPlay, VPause, VStar };

components/modules/__modules__/_Vectors/wavePlayVector.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const VWave = ({ className }) => {
+	return (
+		<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" fill='white' x="0px" y="0px" viewBox="0 0 32 32" className={className} >
+			<g>
+				<path d="M4,13c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1s1-0.4,1-1v-4C5,13.4,4.6,13,4,13z" />
+				<path d="M8,11c-0.6,0-1,0.4-1,1v8c0,0.6,0.4,1,1,1s1-0.4,1-1v-8C9,11.4,8.6,11,8,11z" />
+				<path d="M12,6c-0.6,0-1,0.4-1,1v18c0,0.6,0.4,1,1,1s1-0.4,1-1V7C13,6.4,12.6,6,12,6z" />
+				<path d="M16,13c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1s1-0.4,1-1v-4C17,13.4,16.6,13,16,13z" />
+				<path d="M20,9c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1s1-0.4,1-1V10C21,9.4,20.6,9,20,9z" />
+				<path d="M24,6c-0.6,0-1,0.4-1,1v18c0,0.6,0.4,1,1,1s1-0.4,1-1V7C25,6.4,24.6,6,24,6z" />
+				<path d="M28,13c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1s1-0.4,1-1v-4C29,13.4,28.6,13,28,13z" />
+			</g>
+		</svg>
+
+	)
+}
+
+export default VWave