Projcts feature

src/routeTree.gen.ts

@@ -25,6 +25,7 @@ import { Route as DashboardLeaderboardsIndexImport } from './routes/dashboard/le
 import { Route as DashboardInboxIndexImport } from './routes/dashboard/inbox/index'
 import { Route as DashboardHackathonsIndexImport } from './routes/dashboard/hackathons/index'
 import { Route as DashboardChallengesIndexImport } from './routes/dashboard/challenges/index'
+import { Route as DashboardChallengesExampleDataImport } from './routes/dashboard/challenges/ExampleData'
 
 // Create/Update Routes
 
@@ -114,6 +115,13 @@ const DashboardChallengesIndexRoute = DashboardChallengesIndexImport.update({
   getParentRoute: () => DashboardLayoutRoute,
 } as any)
 
+const DashboardChallengesExampleDataRoute =
+  DashboardChallengesExampleDataImport.update({
+    id: '/challenges/ExampleData',
+    path: '/challenges/ExampleData',
+    getParentRoute: () => DashboardLayoutRoute,
+  } as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -160,6 +168,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProfileIndexImport
       parentRoute: typeof rootRoute
     }
+    '/dashboard/challenges/ExampleData': {
+      id: '/dashboard/challenges/ExampleData'
+      path: '/challenges/ExampleData'
+      fullPath: '/dashboard/challenges/ExampleData'
+      preLoaderRoute: typeof DashboardChallengesExampleDataImport
+      parentRoute: typeof DashboardLayoutImport
+    }
     '/dashboard/challenges/': {
       id: '/dashboard/challenges/'
       path: '/challenges'
@@ -223,6 +238,7 @@ declare module '@tanstack/react-router' {
 
 interface DashboardLayoutRouteChildren {
   DashboardIndexRoute: typeof DashboardIndexRoute
+  DashboardChallengesExampleDataRoute: typeof DashboardChallengesExampleDataRoute
   DashboardChallengesIndexRoute: typeof DashboardChallengesIndexRoute
   DashboardHackathonsIndexRoute: typeof DashboardHackathonsIndexRoute
   DashboardInboxIndexRoute: typeof DashboardInboxIndexRoute
@@ -235,6 +251,7 @@ interface DashboardLayoutRouteChildren {
 
 const DashboardLayoutRouteChildren: DashboardLayoutRouteChildren = {
   DashboardIndexRoute: DashboardIndexRoute,
+  DashboardChallengesExampleDataRoute: DashboardChallengesExampleDataRoute,
   DashboardChallengesIndexRoute: DashboardChallengesIndexRoute,
   DashboardHackathonsIndexRoute: DashboardHackathonsIndexRoute,
   DashboardInboxIndexRoute: DashboardInboxIndexRoute,
@@ -256,6 +273,7 @@ export interface FileRoutesByFullPath {
   '/auth': typeof AuthIndexRoute
   '/dashboard/': typeof DashboardIndexRoute
   '/profile': typeof ProfileIndexRoute
+  '/dashboard/challenges/ExampleData': typeof DashboardChallengesExampleDataRoute
   '/dashboard/challenges': typeof DashboardChallengesIndexRoute
   '/dashboard/hackathons': typeof DashboardHackathonsIndexRoute
   '/dashboard/inbox': typeof DashboardInboxIndexRoute
@@ -272,6 +290,7 @@ export interface FileRoutesByTo {
   '/auth': typeof AuthIndexRoute
   '/dashboard': typeof DashboardIndexRoute
   '/profile': typeof ProfileIndexRoute
+  '/dashboard/challenges/ExampleData': typeof DashboardChallengesExampleDataRoute
   '/dashboard/challenges': typeof DashboardChallengesIndexRoute
   '/dashboard/hackathons': typeof DashboardHackathonsIndexRoute
   '/dashboard/inbox': typeof DashboardInboxIndexRoute
@@ -290,6 +309,7 @@ export interface FileRoutesById {
   '/auth/': typeof AuthIndexRoute
   '/dashboard/': typeof DashboardIndexRoute
   '/profile/': typeof ProfileIndexRoute
+  '/dashboard/challenges/ExampleData': typeof DashboardChallengesExampleDataRoute
   '/dashboard/challenges/': typeof DashboardChallengesIndexRoute
   '/dashboard/hackathons/': typeof DashboardHackathonsIndexRoute
   '/dashboard/inbox/': typeof DashboardInboxIndexRoute
@@ -309,6 +329,7 @@ export interface FileRouteTypes {
     | '/auth'
     | '/dashboard/'
     | '/profile'
+    | '/dashboard/challenges/ExampleData'
     | '/dashboard/challenges'
     | '/dashboard/hackathons'
     | '/dashboard/inbox'
@@ -324,6 +345,7 @@ export interface FileRouteTypes {
     | '/auth'
     | '/dashboard'
     | '/profile'
+    | '/dashboard/challenges/ExampleData'
     | '/dashboard/challenges'
     | '/dashboard/hackathons'
     | '/dashboard/inbox'
@@ -340,6 +362,7 @@ export interface FileRouteTypes {
     | '/auth/'
     | '/dashboard/'
     | '/profile/'
+    | '/dashboard/challenges/ExampleData'
     | '/dashboard/challenges/'
     | '/dashboard/hackathons/'
     | '/dashboard/inbox/'
@@ -391,6 +414,7 @@ export const routeTree = rootRoute
       "filePath": "dashboard/layout.tsx",
       "children": [
         "/dashboard/",
+        "/dashboard/challenges/ExampleData",
         "/dashboard/challenges/",
         "/dashboard/hackathons/",
         "/dashboard/inbox/",
@@ -414,6 +438,10 @@ export const routeTree = rootRoute
     "/profile/": {
       "filePath": "profile/index.tsx"
     },
+    "/dashboard/challenges/ExampleData": {
+      "filePath": "dashboard/challenges/ExampleData.tsx",
+      "parent": "/dashboard"
+    },
     "/dashboard/challenges/": {
       "filePath": "dashboard/challenges/index.tsx",
       "parent": "/dashboard"

src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarLinks.tsx

@@ -23,7 +23,7 @@ export function DashboardSidebarLinks({}: DashboardSidebarLinksProps) {
   const { pathname } = useLocation();
   return (
     <SidebarGroup className="h-full bg-base-100">
-      <SidebarGroupLabel>House keeping</SidebarGroupLabel>
+      <SidebarGroupLabel>Dashboard</SidebarGroupLabel>
       <SidebarMenu className="gap-2">
         {dashboard_routes.map((item) => {
           return (
@@ -37,13 +37,15 @@ export function DashboardSidebarLinks({}: DashboardSidebarLinksProps) {
                   >
                     <TooltipTrigger
                       asChild
-                      className={pathname === item.href
-                        ? `flex w-full gap-3 rounded-lg bg-primary/30 p-1`
-                        : `flex w-full gap-3 rounded-sm p-1 hover:bg-base-300`}
+                      className={
+                        pathname === item.href
+                          ? `flex w-full gap-3 rounded-lg bg-primary/30 p-1`
+                          : `flex w-full gap-3 rounded-sm p-1 hover:bg-base-300`
+                      }
                     >
-                      <span className="flex w-full h-full gap-3 items-center justify-betweenrounded-sm p-1">
+                      <span className="justify-betweenrounded-sm flex h-full w-full items-center gap-3 p-1">
                         <Link
-                          className="flex w-full gap-3 rounded-sm "
+                          className="flex w-full gap-3 rounded-sm"
                           to={item.href}
                           onClick={() => {
                             if (isMobile) {
@@ -55,15 +57,16 @@ export function DashboardSidebarLinks({}: DashboardSidebarLinksProps) {
                           <button className="size-6 text-primary">
                             {item.icon}
                           </button>
-                          {state === "expanded" && (
+                          {/* {isMobile&&<span className="text-lg">{item.name}</span>} */}
+                          {(state === "expanded" || isMobile) && (
                             <span className="text-lg">{item.name}</span>
                           )}
                         </Link>
                         {item.href === "/dashboard/os-projects" && <Plus />}
                         {item.href === "/dashboard/teams" && <Plus />}
                       </span>
                     </TooltipTrigger>
-                    <TooltipContent>{item.name}</TooltipContent>
+                    <TooltipContent side={"right"}>{item.name}</TooltipContent>
                   </Tooltip>
                 </TooltipProvider>
               </SidebarMenuButton>

src/routes/dashboard/challenges/-components/ContributionsList.tsx

@@ -0,0 +1,88 @@
+import { GitFork,Bug, Code, Star } from "lucide-react";
+
+interface ContributiosnListProps {}
+
+export function ContributiosnList({}: ContributiosnListProps) {
+  type Project = {
+    titile: string;
+    description: string;
+    forks: number;
+    stars: number;
+    langs: string[];
+    issues: number;
+    lastCommit: string;
+  };
+  const projects: Array<Project> = [
+    {
+      titile: "Project 1",
+      description: "This is a project",
+      forks: 10,
+      stars: 20,
+      langs: ["JavaScript", "TypeScript"],
+      issues: 5,
+      lastCommit: "2021-09-01",
+    },
+    {
+      titile: "Project 2",
+      description: "This is another project",
+      forks: 5,
+      stars: 10,
+      langs: ["JavaScript", "TypeScript"],
+      issues: 3,
+      lastCommit: "2021-08-01",
+    },
+    {
+      titile: "Project 3",
+      description: "This is a third project",
+      forks: 2,
+      stars: 5,
+      langs: ["JavaScript", "TypeScript"],
+      issues: 1,
+      lastCommit: "2021-07-01",
+    },
+    {
+      titile: "Project 4",
+      description: "This is a fourth project",
+      forks: 1,
+      stars: 1,
+      langs: ["JavaScript", "TypeScript"],
+      issues: 0,
+      lastCommit: "2021-06-01",
+    },
+  ];
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center">
+      list the contributions here
+      {projects.map((project) => {
+        return (
+          <div key={project.titile} className="mb-4 rounded-lg border border-slate-200 p-4">
+            <h1 className="text-2xl font-bold">{project.titile}</h1>
+            <p className="text-slate-600">{project.description}</p>
+            <p className="flex items-center">
+              <GitFork className=" size-4" />
+              <span className="text-sm">{project.forks}</span>
+            </p>
+            <p className="flex items-center">
+              <Star className=" size-4" />
+              <span className="text-sm">{project.stars}</span>
+            </p>
+            <p className="flex items-center">
+              <Code className=" size-4" />
+              <span className="text-sm">{project.langs.join(", ")}</span>
+            </p>
+            <p className="flex items-center">
+              <Bug className=" size-4" />
+              <span className="text-sm">{project.issues}</span>
+            </p>
+            <p className="flex items-center">
+              {/* <IconCalendar className=" size-4" /> */}
+              <span className="text-sm">{project.lastCommit}</span>
+            </p>
+          </div>
+        );
+      })}   
+    </div>
+  );
+}
+
+

src/routes/dashboard/challenges/-components/InfoBox.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+interface InfoBoxProps {
+  title: string; // Define the title prop
+  width?: string; // Optional width prop for customization
+}
+
+const InfoBox: React.FC<InfoBoxProps> = ({ title, width = "16rem" }) => {
+  return (
+    <div
+      className="bg-gray-800 text-white rounded-lg shadow-md p-6 h-40 flex flex-col justify-between hover:scale-105 transform transition-transform"
+      style={{
+        borderRadius: "10px",
+        boxShadow: "0 4px 10px rgba(0, 0, 0, 0.3)",
+        margin: "20px",
+        width, // Apply dynamic width
+        height: '150px'
+      }}
+    >
+      {/* Title */}
+      <div
+        className="text-lg font-bold text-center"
+        style={{ textAlign: "center", margin: "10px" }}
+      >
+        {title}
+      </div>
+
+      {/* Content */}
+      <div className="flex flex-col space-y-2">
+        <div className="flex justify-between text-sm">
+          <span>Metric 1:</span>
+          <span className="font-medium text-green-400">123</span>
+        </div>
+        <div className="flex justify-between text-sm">
+          <span>Metric 2:</span>
+          <span className="font-medium text-red-400">45%</span>
+        </div>
+        <div className="flex justify-between text-sm">
+          <span>Metric 3:</span>
+          <span className="font-medium text-yellow-400">12</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InfoBox;