Fe resouces page Added

components/DSA/Badges.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { BsHexagon } from "react-icons/bs";
+
+export const Badges = () => {
+  const badges = 7;
+  return (
+    <>
+      <div className="text-lightblack  mt-0 md:mt-28  h-max md:h-80 w-6/6 md:w-2/6 p-3 bg-whitish mx-0 md:mx-2 my-4 rounded-xl">
+
+        <h1 className=" text-5xl md:text-5xl font-bold ml-4 md:ml-0">
+          Badges <span className="text-whitish">ex</span>
+        </h1>
+        <div className="flex flex-row space-between items-center space-x-20 mt-8">
+          <h1 className="text-9xl ml-8 md:ml-0">{`${badges}`}</h1>
+          <BsHexagon className="h-40 w-40 text-badge" />
+        </div>
+      </div>
+    </>
+  );
+};

components/DSA/Problem.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { CircularProgressbar } from "react-circular-progressbar";
+import "react-circular-progressbar/dist/styles.css";
+import { linebar } from "@/constant/DSA/problem_stats";
+export const Problem = () => {
+  const percentage = 70; //percentage
+
+  return (
+    <>
+      <div className="text-lightblack mt-28 h-max md:h-80 w-6/6 md:w-4/6 p-3 bg-whitish my-4  rounded-lg">
+        <h1 className="text-4xl font-bold mb-4 ml-4 md:ml-0">
+          Solved Problems <span className="text-whitish">ext</span>
+        </h1>
+        <div className="flex flex-col md:flex-row items-center space-x-0 md:space-x-16">
+          <div className="w-48 h-48 mr-8">
+            <div className="relative h-full">
+              <CircularProgressbar
+                value={percentage}
+                text={`${percentage}%`}
+                strokeWidth={15}
+                styles={{
+                  path: {
+                    stroke: "#FF904D",
+                    strokeLinecap: "butt",
+                    transition: "stroke-dashoffset 0.5s ease 0s",
+                    transform: "rotate(0.25turn)",
+                    transformOrigin: "center center",
+                  },
+                  trail: {
+                    stroke: "#FFBD58",
+                    strokeLinecap: "butt",
+                    transform: "rotate(0.25turn)",
+                    transformOrigin: "center center",
+                  },
+                  text: {
+                    fill: "#FE995C",
+                    fontSize: "14px",
+                  },
+                }}
+              />
+            </div>
+          </div>
+          <div className="flex flex-col space-y-4">
+            {linebar?.map((data, index) => (
+              <div key={index}>
+                <h1 className="text-xl font-bold mb-2">{data.title}</h1>
+                <div className="h-6 w-80 bg-free rounded-full">
+                  <div
+                    className="h-full bg-easy rounded-full"
+                    style={{ width: `${data.score}` }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

components/DSA/Submission.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { submissions } from "@/constant/DSA/problem_name";
+
+export const Submission = () => {
+  const commonStyle = "box-border p-3  bg-cream rounded-lg";
+
+  return (
+    <>
+      <div className="text-lightblack  p-3 h-max md:h-96 w-6/6 rounded-lg bg-whitish my-2 mr-0 md:mr-2 ">
+        <h2 className="text-4xl font-bold ml-3 md:ml-0">View All Submission</h2>
+        <div className="text-3xl mt-6 overflow-y-auto w-6/6 h-64 sm:Overflow-x-auto ">
+          <div className="flex flex-col space-y-2">
+            {submissions.map((submissions, index) => (
+              <li key={index} className={commonStyle}>
+                {submissions}
+              </li>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

components/DSA/index.tsx

@@ -1,9 +1,22 @@
-import React from 'react'
+import React from "react";
+import { Badges } from "./Badges";
+import { Problem } from "./Problem";
+import { Submission } from "./Submission";
 
-const DSA = () => {
+const DSA: React.FC<{}> = () => {
   return (
-    <div className='text-black'>index_dsa</div>
-  )
-}
+    <>
+      <div className="ml-0 md:ml-64">
+        <div className="ml-0 md:ml-10">
+          <div className="flex flex-col md:flex-row">
+            <Problem />
+            <Badges />
+          </div>
+          <Submission />
+        </div>
+      </div>
+    </>
+  );
+};
 
-export default DSA
+export default DSA;

components/LAYOUT/Leftbar.tsx

@@ -1,31 +1,29 @@
-import React from 'react';
-import Image from 'next/image';
+import React from "react";
+
+import Image from "next/image";
 
 const Leftbar: React.FC = () => {
   return (
-    <div className="fixed top-0 left-0 bottom-0 bg-[#fef9f4] w-1/5 p-4">
-      <div className="flex items-center justify-center mb-8">
-
-
-
-
-  <Image
-          className="h-auto max-w-full mt-4" 
-          src="/logo1.png"
-          alt="me"
-          width={210}
-          height={60}
-        />
-
+    <div className="fixed top-0 left-0 bottom-0 bg-whitish w-24 md:w-1/5 mdp-4 hidden md:block ">
+      <div className="flex items-center justify-center mb-8 o">
+        <div className="flex items-center">
+          <Image
+            className=" h-0 md:h-auto max-w-0 md:max-w-full mt-0 md:mt-4 "
+            src="/logo1.png"
+            alt="me"
+            width={210}
+            height={60}
+          />
+        </div>
       </div>
-      <div className="space-y-4 mt-10">
-        <button className="w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded">
+      <div className="space-y-4">
+        <button className="mt-4 md:mt-0 w-36 md:w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded">
           DSA
         </button>
-        <button className="w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded">
+        <button className="w-36 md:w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded">
           DEVELOPMENT
         </button>
-        <button className="w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded">
+        <button className="w-36 md:w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded">
           RESOURCES
         </button>
       </div>
@@ -34,7 +32,3 @@ const Leftbar: React.FC = () => {
 };
 
 export default Leftbar;
-
-
-
-

components/LAYOUT/Navbar.tsx

@@ -1,17 +1,85 @@
-import React from 'react';
+import React from "react";
+import { useState } from "react";
+import Image from "next/image";
 
 const Navbar: React.FC = () => {
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const toggleMenu = () => {
+    setMenuOpen(!isMenuOpen);
+  };
   return (
-    <nav className="fixed top-2 left-0 right-2 bg-[#fef9f4] bg opacity-95 p-4 ml-[20.5%] rounded-[30px]">
-      <div className="container mx-auto flex justify-between items-center">
-        <div className="text-white font-bold text-lg"></div>
-        <div className="space-x-4">
-          <button className="rounded-lg p-3 border-2 border-orangee bg-orangee hover:bg-orange-500 text-lg">
-                      Logout
-</button>
+    <>
+      <nav className="fixed top-2 left-0 right-2 bg-whitish bg opacity-95 p-4 ml-[20.5%] rounded-[30px]">
+        <div className="container mx-auto flex justify-between items-center">
+          <div className="text-white font-bold text-lg">
+          {/* <Image
+            className=" block md:hidden h-full w-5/6"
+            src="/logo1.png"
+            alt="me"
+            width={210}
+            height={60}
+          /> */}
+          </div>
+          <div className="space-x-4">
+
+            <button className="rounded-lg p-3 border-2 border-orangee bg-orangee hover:bg-orange-500 text-lg">
+              Logout
+            </button>
+          </div>
+        </div>
+
+      </nav>
+
+      <div className="fixed top-0 left-0 bottom-0 bg-whitish w-0 mdp-4 block md:hidden rounded-lg ">
+        <div className="w-40 h-80">
+          <button
+            className="block lg:hidden focus:outline-none"
+            onClick={toggleMenu}
+          >
+            <svg
+              className="h-12 w-12 text-gray-600 mt-4 ml-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              {isMenuOpen ? (
+                <path
+                  className="bg-black"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              ) : (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              )}
+            </svg>
+          </button>
+          <div
+            className={`space-y-4 mt-1 ${
+              isMenuOpen ? "block" : "hidden lg:block"
+            }`}
+          >
+            <div className="bg-whitish space-y-5 p-2">
+              <button className="mt-4 md:mt-0 w-36 md:w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded ">
+                DSA
+              </button>
+              <button className="w-36 md:w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded">
+                DEVELOPMENT
+              </button>
+              <button className="w-36 md:w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded">
+                RESOURCES
+              </button>
+            </div>
+          </div>
         </div>
       </div>
-    </nav>
+    </>
   );
 };
 

components/Resource/dev.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { devSourceItem } from "@/constant/Resources/Dev_resources";
+import Link from 'next/link';
+export default function Dev() {
+  const commonStyle = "box-border p-3 bg-cream rounded-lg ml-2";
+  return (
+    <>
+      <div className="text-lightblack p-3 h-max md:h-64 w-max md:w-1/2  rounded-lg bg-whitish my-2 mr-3 md:mr-2">
+        <h2 className="text-4xl font-bold ml-3 md:ml-0 ">
+          Developmet Resource
+        </h2>
+        <div className="text-3xl mt-6 overflow-y-auto w-6/6 h-max sm:Overflow-x-auto">
+          <div className="flex flex-col space-y-2">
+            {devSourceItem?.map((devSourceItem, index) => (
+              <span key={index} className={commonStyle}>
+                <Link href={devSourceItem.link} key={index}>
+                  {devSourceItem.name}
+                </Link>
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

components/Resource/dsa.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import {dsaSourceItem} from "@/constant/Resources/Dsa_resources";
+import Link from 'next/link';
+export default function Dsa() {
+  const commonStyle = 'box-border p-3 bg-cream rounded-lg ml-2';
+  return (
+    <>
+      <div className="text-lightblack p-3 h-max md:h-64 w-max md:w-1/2  rounded-lg bg-whitish my-2 mr-3 md:mr-2">
+        <h2 className="text-4xl font-bold ml-0 md:ml-0">DSA Resources <span className='text-whitish'>with do</span> </h2>
+        <div className="text-3xl mt-6 overflow-y-auto w-6/6 h-max sm:Overflow-x-auto">
+          <div className="flex flex-col space-y-2">
+            {dsaSourceItem?.map((dsaSourceItem, index) => (
+              <span key={index} className={commonStyle}>
+                  <Link href={dsaSourceItem.link} key={index}>
+                    {dsaSourceItem.name}
+                  </Link>
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

components/Resource/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import Dsa from "./dsa";
+import Dev from "./dev";
+
+const Resouces: React.FC<{}> = () => {
+  return (
+    <>
+      <div className="ml-0 md:ml-72 mt-28">
+        <div className="ml-4">
+          <div className="flex flex-col md:flex-row">
+            <Dsa />
+            <Dev />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Resouces;

constant/DSA/problem_name.ts

@@ -0,0 +1,14 @@
+export const submissions = [
+    'Valid Parenthesis',
+    'Palindrome Number',
+    'Happy Number',
+    'Ugly Number',
+    'Array Sorting',
+    'Merge Two Sorted Lists',
+    'Reverse Linked List II',
+    'Middle of the Linked List',
+    'Reverse Linked List I',
+    'Find the Highest Altitude',
+    'Binary Search',
+    'Search Insert Position',
+  ];

constant/DSA/problem_stats.ts

@@ -0,0 +1,14 @@
+export const linebar = [
+    {
+      title: "Easy",
+      score: "40%"
+    },
+    {
+      title: "Medium",
+      score: "50%"
+    },
+    {
+      title: "Hard",
+      score: "20%"
+    }
+  ];