Fe dsa is optimised

components/DSA/Badges.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { BsHexagon } from "react-icons/bs";
+const badges = 7;
+export const Badges = () => {
+
+  return (
+    <>
+      <div className="text-lightblack  mt-0 md:mt-28  h-max md:h-80 w-full md:w-1/3 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 justify-between items-center gap-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-full md:w-2/3 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 gap-x-0 md:gap-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,27 @@
+import React from "react";
+import { submissions } from "@/constant/DSA/problem_name";
+import { FaDotCircle } from 'react-icons/fa';
+
+export const Submission = () => {
+  const commonStyle = "box-border p-3  bg-cream rounded-lg w-full";
+
+  return (
+    <>
+      <div className="text-lightblack  p-3 h-max md:h-96 w-full rounded-lg bg-whitish my-2 mr-2 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-full h-64 sm:Overflow-x-auto">
+          <div className="flex flex-col gap-y-2 ">
+            {submissions.map((submissions, index) => (
+              <ul className="flex flex-row gap-x-2 w-full " key={index}>
+                <FaDotCircle className="text-2xl text-orange-500  mt-4 "/>
+              <li  className={commonStyle}>
+                {submissions}
+              </li>
+              </ul>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

components/DSA/index.tsx

@@ -1,9 +1,24 @@
-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-2 md:ml-64 mr-2 md:mr-0 ">
+        <div className="ml-0 md:ml-10">
+          <div className="flex flex-col md:flex-row">
+            <Problem />
+            <Badges />
+          </div>
+          <div className="mr-0 md:mr-2">
+          <Submission  />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
 
-export default DSA
+export default DSA;

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%"
+    }
+  ];

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ramonak/react-progress-bar": "^5.0.3",
     "@reduxjs/toolkit": "^1.9.5",
     "@types/node": "20.4.2",
     "@types/react": "18.2.15",
@@ -19,9 +20,14 @@
     "next": "13.4.10",
     "postcss": "8.4.26",
     "react": "18.2.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.10.1",
     "react-redux": "^8.1.1",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
+  },
+  "devDependencies": {
+    "prettier": "^3.0.0"
   }
 }

pages/dsa/index.tsx

@@ -1,5 +1,6 @@
 import DSA from "@/components/DSA";
 
 export default function DSAPage(){
-  return <DSA />
+  return <DSA/>
+
 }

tailwind.config.js

@@ -12,11 +12,16 @@ module.exports = {
         lightorange: "#FFBD58",
         lightyellow: "#FEEA9D",
         skincolor:"#FFBD58",
-        easy:"#FAE7C4",
+        easy:"#FEAA70",
+        free:"#F4EEE9",
         redishorange:"#EF7E4C",
         reddish:"#FB3800",
         greyy:"#F4EEE9",
+        cream:"#FCE8E0",
+        lightblack:"#4E4039",
         orange2:"#FE995C",
+        whitish:"#fef9f4",
+        badge: "#FE995C",
 
       },
       backgroundImage: {