feat(projects): migrate manage-projects module UI to Material UI (MUI)

client/.vercelignore

@@ -1,8 +1,6 @@
-projects/*
-server/*
-client/src/modules/edit-profile/*
-client/src/modules/manage-projects/*
-client/src/modules/notification/*
-src/modules/edit-profile/*
-src/modules/manage-projects/*
-src/modules/notification/*
+projects/*
+server/*
+client/src/modules/edit-profile/*
+client/src/modules/notification/*
+src/modules/edit-profile/*
+src/modules/notification/*

client/src/App.tsx

@@ -13,7 +13,7 @@ import Profile from './modules/profile';
 import Project from './modules/project';
 import Sidebar from './shared/components/organisms/sidebar';
 // import ChangePassword from "./modules/change-password";
-// import ManageProjects from "./modules/manage-projects";
+import ManageProjects from './modules/manage-projects';
 // import EditProfile from "./modules/edit-profile";
 // import Notifications from "./modules/notification";
 
@@ -35,7 +35,7 @@ function App() {
             <Route path="project/:project_id" element={<Project />} />
 
             <Route path="dashboard" element={<Sidebar />}>
-              {/* <Route path="projects" element={<ManageProjects />} /> */}
+              <Route path="projects" element={<ManageProjects />} />
               {/* <Route path="notifications" element={<Notifications />} /> */}
             </Route>
             <Route path="settings" element={<Sidebar />}>

client/src/modules/manage-projects/components/draft-projects.tsx

@@ -1,48 +1,61 @@
+import { Link } from 'react-router-dom';
+import { Box, Typography, Button, Card, CardContent } from '@mui/material';
+import { Project, deleteProject } from './utils';
+
 const ManageDraftProjectPost = ({ project }: { project: Project }) => {
   const { title, des } = project;
   let { index = 0 } = project;
 
   index++;
 
   return (
-    <div className="flex gap-10 border-b mb-6 max-md:px-4 border-gray-100 pb-6 items-center">
-      <h1 className="blog-index text-center pl-4 md:pl-6 flex-none">
-        {index < 10 ? '0' + index : index}
-      </h1>
-
-      <div>
-        <h1 className="blog-title mb-3">{title}</h1>
-
-        <p className="line-clamp-2 font-gelasio">
-          {des?.length ? des : 'No Description'}
-        </p>
-
-        <div className="flex gap-6 mt-3">
-          <Link
-            to={`/editor/${project.project_id}`}
-            className="pr-4 py-2 underline"
-          >
-            Edit
-          </Link>
-
-          <button
-            className="lg:hidden pr-4 py-2 underline text-red"
-            onClick={e => deleteProject(project, '', e.target as HTMLElement)}
-          >
-            Delete
-          </button>
-        </div>
-      </div>
-
-      <div className="max-lg:hidden">
-        <button
-          className="lg:block hidden pr-4 py-2 underline text-red"
-          onClick={e => deleteProject(project, '', e.target as HTMLElement)}
+    <Card variant="outlined" sx={{ mb: 2, borderRadius: 2 }}>
+      <CardContent>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', md: 'row' },
+            alignItems: 'center',
+            gap: 2,
+          }}
         >
-          Delete
-        </button>
-      </div>
-    </div>
+          <Box sx={{ minWidth: 56, textAlign: 'center' }}>
+            <Typography sx={{ fontWeight: 600 }}>
+              {index < 10 ? '0' + index : index}
+            </Typography>
+          </Box>
+
+          <Box sx={{ flex: 1 }}>
+            <Typography variant="h6" sx={{ mb: 1 }}>
+              {title}
+            </Typography>
+
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+              {des?.length ? des : 'No Description'}
+            </Typography>
+
+            <Box sx={{ display: 'flex', gap: 2 }}>
+              <Button
+                component={Link}
+                to={`/editor/${project.project_id}`}
+                size="small"
+              >
+                Edit
+              </Button>
+              <Button
+                size="small"
+                color="error"
+                onClick={e =>
+                  deleteProject(project, '', e.target as HTMLElement)
+                }
+              >
+                Delete
+              </Button>
+            </Box>
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
   );
 };