OpenCodeDevelopers · jaiyankargupta · Jul 12, 2024 · Jul 12, 2024
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
@@ -23,10 +23,10 @@ export default function RootLayout({
       <body
         className={`${inter.className} bg-[#030014] overflow-y-scroll overflow-x-hidden`}
       >
+        <Navbar />
         <StarsCanvas />
-        {/* <Navbar /> */}
-        <Dashboard />
-        {/* <Footer /> */}
+        <Dashboard  />
+        <Footer />
       </body>
     </html>
   );

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -1,14 +1,48 @@
-export default function Dashboard() {
+import ProfilePicture from '../../components/Image/image';
+import Openedu from '../../components/openedu/openedu';
+import Codingplatform from '../../components/codingplatform/codingplatform';
+import Notification from '../../components/notification/notification';
+import Experience from '../../components/experience/experience';
+import Projects from '../../components/projects/projects';
+import Education from '../../components/education/education'
+
+export default function Dashboard({}) {
   return (
-    <main className="h-full w-full text-white">
-      <div className="flex flex-col gap-20">
-        <div>Name</div>
-        <div>email</div>
-        <div>Other details like github stats, cp stats, proj, exp so on...</div>
-        {/*
-         * // TODO connect with @OpenEdu's prublic profile builder
-         */}
-      </div>
-    </main>
+    <>
+      <main className="text-white flex justify-center mt-16 pt-10 pr-16 pl-16">
+        <div className="w-full max-w-4xl border border-gray-300 p-4 bg-gray-900 rounded-lg shadow-lg">
+          <div className="flex flex-row">
+            {/* Section 1: Profile Picture */}
+            <div className='flex '>
+            <div className="mr-4 inline-block	">
+              <ProfilePicture />
+            </div>
+
+            {/* Section 2: Details */}
+            <div className="flex-1 flex flex-col gap-1 pl-2 pr-2 mt-4 text-lg font-bold"> {/* Adjusted padding */}
+              <div>Name : <span className='font-normal'>{}</span></div>
+              <div >Email : <span className='font-normal'>{}</span></div>
+              <div>Branch : <span className='font-normal'>{}</span></div>
+              <div>Section : <span className='font-normal'>{}</span></div>
+              <div>Stat : <span className='font-normal'>{}</span></div>
+
+
+            </div>
+            </div>
+
+            {/* Section 3: Edit Button */}
+            <div className="flex-1 text-end ml-4 inline-block	">
+              <button className="bg-blue-500 text-white px-4 rounded font-semibold">Edit</button>
+            </div>
+          </div>
+        </div>
+      </main>
+      <Openedu/>
+      <Codingplatform/>
+      <Notification/>
+      <Experience/>
+      <Projects/>
+      <Education/>
+    </>
   );
 }
diff --git a/components/Image/github.png b/components/Image/github.png
diff --git a/components/Image/image.tsx b/components/Image/image.tsx
@@ -0,0 +1,65 @@
+import Image from "next/image";
+import twitterlogo from "./twitter.png";
+import linkedinlogo from "./linkedin.png";
+import githublogo from "./github.png";
+
+function ProfilePicture({}) {
+  return (
+    <>
+      <Image src={githublogo} objectFit="cover" alt="User Profile" width={60} height={70} />
+      <div className="mt-4">
+        <a
+          href="#"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-500 hover:text-blue-700 hover:underline flex items-center"
+        >
+          <Image
+            className=" inline-block"
+            src={githublogo}
+            width={25}
+            height={25}
+            alt="Github"
+          />
+          <span className="text-sm ml-1">Github</span>
+        </a>
+        <div className="">
+          <a
+            href= '#'
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500 hover:text-blue-700 hover:underline flex items-center"
+          >
+            <Image
+              className="mt-1 inline-block"
+              src={linkedinlogo}
+              width={25}
+              height={20}
+              alt="Linkedin"
+            />
+            <span className="text-sm ml-1">Linkedin</span>
+          </a>
+        </div>
+        <div className="">
+          <a
+            href="#"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500 hover:text-blue-700 hover:underline flex items-center"
+          >
+            <Image
+              className="mt-1 inline-block"
+              src={twitterlogo}
+              width={25}
+              height={30}
+              alt="Twitter"
+            />
+            <span className="text-sm ml-1">Twitter</span>
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ProfilePicture;
diff --git a/components/Image/linkedin.png b/components/Image/linkedin.png
diff --git a/components/Image/twitter.png b/components/Image/twitter.png
diff --git a/components/codingplatform/codingplatform.tsx b/components/codingplatform/codingplatform.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+function Codingplatform({  }) {
+  return (
+    <section className="text-white flex justify-center mt-5 pr-16 pl-16">
+      <div className="w-full max-w-4xl border border-gray-300 p-4 bg-gray-900 rounded-lg shadow-lg">
+        <div className="text-center text-2xl font-bold mb-4">
+          Coding Platform Ratings
+        </div>
+        <div className="flex flex-col space-y-2">
+          <div className="flex justify-between">
+            <span className="font-semibold">Codechef Rating: </span>
+            <span>{}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="font-semibold">Codeforces Rating: </span>
+            <span>{}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="font-semibold">Leetcode Rating: </span>
+            <span>{}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Codingplatform;
diff --git a/components/education/education.tsx b/components/education/education.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+function Education() {
+  return (
+    <main className="text-white flex justify-center mt-5 pl-16 pr-16 mb-20">
+      <div className="w-full max-w-5xl border border-gray-300 p-4 bg-gray-900 rounded-lg shadow-lg">
+        <div className="text-center text-2xl font-bold mb-4">Education</div>
+      </div>
+    </main>
+  );
+}
+
+export default Education;
diff --git a/components/experience/experience.tsx b/components/experience/experience.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+function Experience() {
+  return (
+    <main className="text-white flex justify-center mt-5 pl-16 pr-16">
+      <div className="w-full max-w-5xl border border-gray-300 p-4 bg-gray-900 rounded-lg shadow-lg">
+        <div className="text-center text-2xl font-bold mb-4">Experience</div>
+      </div>
+    </main>
+  );
+}
+
+export default Experience;
diff --git a/components/notification/notification.tsx b/components/notification/notification.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+function Notification() {
+
+
+  return (
+    <main className="text-white flex justify-center mt-5 pl-16 pr-16">
+      <div className="w-full max-w-5xl border border-gray-300 p-4 bg-gray-900 rounded-lg shadow-lg">
+        <div className="text-center text-2xl font-bold mb-4">Notifications</div>
+      </div>
+    </main>
+  );
+}
+
+export default Notification;
diff --git a/components/openedu/openedu.tsx b/components/openedu/openedu.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+function Openedu() {
+  return (
+    <>
+      <main className="text-white flex justify-center mt-5 pr-16 pl-16">
+        <div className="w-full max-w-5xl border border-gray-300 p-4 font-bold bg-gray-900 rounded-lg shadow-lg mr-3">
+          <a href="">
+            <div className="text-center">Connect with OpenEdu to get stats</div>
+          </a>
+        </div>
+        <div className="w-full max-w-6xl border border-gray-300 p-4 font-bold bg-gray-900 rounded-lg shadow-lg ">
+          <a href="">
+            <div className="text-center">Public Profile Builder</div>
+          </a>
+        </div>
+      </main>
+    </>
+  );
+}
+
+export default Openedu;
diff --git a/components/projects/projects.tsx b/components/projects/projects.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+function Projects() {
+
+  return (
+    <section className="text-white flex justify-center mt-5 pr-16 pl-16">
+      <div className="w-full max-w-4xl border border-gray-300 p-4 bg-gray-900 rounded-lg shadow-lg">
+
+
+        <div className="text-center text-2xl font-bold mb-4">Projects</div>
+
+
+      </div>
+
+    </section>
+  );
+}
+
+export default Projects;