category page added

G-Techs · Jun 23, 2022 · 7f9aad5 · 7f9aad5
1 parent d28a2f4
commit 7f9aad5
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 24 deletions.
diff --git a/components/CategoryPage/index.jsx b/components/CategoryPage/index.jsx
@@ -1,7 +1,13 @@
 import React from "react";
+import Category from "../modules/Category";
+import PageCard from "../modules/__modules__/Card/PageCard";
 
 const CategoryPage = () => {
-  return <div>CategoryPage</div>;
+  return (
+    <PageCard>
+      <Category />
+    </PageCard>
+  );
 };
 
 export default CategoryPage;
diff --git a/components/LatestPage/index.jsx b/components/LatestPage/index.jsx
@@ -1,13 +1,9 @@
 import React from "react";
 import HotSongs from "../modules/HotSongs";
-import { leftNavPinedAtom } from "../lib/atoms";
-import { useRecoilValue } from "recoil";
 import TopSongs from "../modules/TopSongs/TopSongs";
 import PageCard from "../modules/__modules__/Card/PageCard";
 
 const LatestPage = () => {
-  const isLeftNavPined = useRecoilValue(leftNavPinedAtom);
-
   return (
     <div className="bg-globalBg">
       <PageCard>

diff --git a/components/modules/Category/index.jsx b/components/modules/Category/index.jsx
@@ -1,7 +1,74 @@
 import React from "react";
+import { VPen, VTrash } from "../__modules/Vectors";
 
 const Category = () => {
-  return <div>Category</div>;
+  return (
+    <div className="my-24 bg-white flex flex-col w-full border shadow-lg">
+      <div className="flex justify-between items-center px-5 py-5 border-b border-gray-200">
+        <h3 className="font-bold text-2xl">Category Lists</h3>
+        <button className="bg-primary text-white px-4 py-2 rounded-md">
+          Add New Category
+        </button>
+      </div>
+      <div className="flex 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>
+          <label htmlFor="searchItem" className="px-4">
+            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="mr-5">
+        <table className="border border-gray-300 w-full">
+          <tr>
+            <th className="border px-10">No</th>
+            <th className="border px-10">Song Category</th>
+            <th className="border px-10">Category Description</th>
+            <th className="border px-10">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 px-5">Rock songs</td>
+                <td className="border px-5">
+                  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt
+                  !
+                </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>
+            );
+          })}
+        </table>
+      </div>
+    </div>
+  );
 };
 
 export default Category;
diff --git a/components/modules/NavBar/LeftNav/AdminMenu/AdminSubmenu/index.jsx b/components/modules/NavBar/LeftNav/AdminMenu/AdminSubmenu/index.jsx
@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React from "react";
 import {
   CategoryIcon,
@@ -15,12 +16,14 @@ const AdminSubmenu = () => {
         </span>
         DashBoard
       </li>
-      <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
-        <span className="p-2 bg-gray-200 mx-1 rounded-lg">
-          <CategoryIcon />
-        </span>
-        Category
-      </li>
+      <Link href="/admin/category">
+        <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
+          <span className="p-2 bg-gray-200 mx-1 rounded-lg">
+            <CategoryIcon />
+          </span>
+          Category
+        </li>
+      </Link>
       <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
         <span className="p-2 bg-gray-200 mx-1 rounded-lg">
           <MicIcon />

diff --git a/components/modules/__modules/Vectors/index.js b/components/modules/__modules/Vectors/index.js
@@ -43,10 +43,20 @@ import {
   RiAccountBoxLine as AccountIcon,
 } from "react-icons/ri";
 import { ImProfile as ProfileSheetIcon } from "react-icons/im";
-import { FiChevronRight as ViewMoreIcon } from "react-icons/fi";
+import {
+  FiChevronRight as ViewMoreIcon,
+  FiTrash2 as VTrash,
+} from "react-icons/fi";
 import { MdLoop as LoopIcon } from "react-icons/md";
-import { RiPlayListLine as PlayListIcon,RiShuffleFill as  ShuffleIcon} from "react-icons/ri";
-import { BsFillVolumeUpFill as VolumeUpIcon,BsFillVolumeMuteFill as VolumeDownIcon} from "react-icons/bs";
+import {
+  RiPlayListLine as PlayListIcon,
+  RiShuffleFill as ShuffleIcon,
+  RiPencilLine as VPen,
+} from "react-icons/ri";
+import {
+  BsFillVolumeUpFill as VolumeUpIcon,
+  BsFillVolumeMuteFill as VolumeDownIcon,
+} from "react-icons/bs";
 
 export {
   SeachIcon,
@@ -87,5 +97,7 @@ export {
   VolumeUpIcon,
   LoopIcon,
   PlayListIcon,
-  ShuffleIcon
+  ShuffleIcon,
+  VPen,
+  VTrash,
 };
diff --git a/components/modules/__modules__/Card/PageCard.jsx b/components/modules/__modules__/Card/PageCard.jsx
@@ -8,16 +8,18 @@ import BottomPlayer from "../../../BottomPaler/BottomPalyer";
 const PageCard = ({ 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}
+    <>
+      <div
+        className={`relative flex flex-col ${
+          !isLeftNavPined ? "ml-28 transition-all" : "transition-all ml-72"
+        } mobile:ml-5`}
+      >
+        <TopNav setIsTopNav={setIsTopNav} />
+        {children}
+      </div>
       <LeftNav />
       <BottomPlayer />
-    </div>
+    </>
   );
 };
 

diff --git a/pages/admin/category.js b/pages/admin/category.js
@@ -0,0 +1,12 @@
+import React from "react";
+import CategoryPage from "../../components/CategoryPage";
+
+const category = () => {
+  return (
+    <div className="bg-globalBg h-screen">
+      <CategoryPage />
+    </div>
+  );
+};
+
+export default category;