Create layout for home page (#6)

* Create layout for sidebar and projects page * Refactor routes for dashboard * Add navigation to sidebar elements * Update README * Remove space in class name --------- Co-authored-by: neeraj <neeraj.rtly@gmail.com>
2023-12-11 20:05:34 +05:30
parent 4f0363e8e2
commit 4f6a523f56
12 changed files with 175 additions and 24 deletions
@@ -12,6 +12,7 @@
    "@types/react-dom": "^18.2.17",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@@ -1,29 +1,19 @@
 import React from 'react';
-import logo from './logo.svg';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
+import Dashboard from './pages/dashboard';
+import { dashboardRoutes } from './pages/dashboard/routes';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Dashboard />,
+    children: dashboardRoutes,
+  },
+]);

 function App() {
-  return (
-    <div className="text-center">
-      <header className="bg-gray-900 min-h-screen flex flex-col items-center justify-center text-white text-2xl">
-        <img
-          src={logo}
-          className="animate-spin pointer-events-none h-96"
-          alt="logo"
-        />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="text-blue-400"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  return <RouterProvider router={router} />;
 }

 export default App;
@@ -0,0 +1,37 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+const Sidebar = () => {
+  return (
+    <div className="flex flex-col h-full p-4">
+      <div className="basis-1/2 flex flex-col justify-start gap-4">
+        <div>
+          <h3 className="text-black text-2xl">Snowball</h3>
+        </div>
+        <div>Organization</div>
+        <div>
+          <NavLink
+            to="/"
+            className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
+          >
+            Projects
+          </NavLink>
+        </div>
+        <div>
+          <NavLink
+            to="/settings"
+            className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
+          >
+            Settings
+          </NavLink>
+        </div>
+      </div>
+      <div className="basis-1/2 flex flex-col justify-end gap-4">
+        <div>Documentation</div>
+        <div>Support</div>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CreateProject = () => {
+  return (
+    <div className="bg-white rounded-3xl h-full">Create new project page</div>
+  );
+};
+
+export default CreateProject;
@@ -0,0 +1,10 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+const Project = () => {
+  const { id } = useParams();
+
+  return <div className="bg-white rounded-3xl h-full">Project page: {id}</div>;
+};
+
+export default Project;
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Projects = () => {
+  return <div className="bg-white rounded-3xl h-full">Projects</div>;
+};
+
+export default Projects;
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Settings = () => {
+  return <div className="bg-white rounded-3xl h-full">Settings page</div>;
+};
+
+export default Settings;
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+
+import Sidebar from '../../components/dashboard/Sidebar';
+
+const Dashboard = () => {
+  return (
+    <div className="grid grid-cols-5 h-screen bg-sky-100">
+      <div className="h-screen">
+        <Sidebar />
+      </div>
+      <div className="col-span-4 h-screen p-3">
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Projects from './Projects';
+import Project from './Project';
+import Settings from './Settings';
+import CreateProject from './CreateProject';
+
+export const dashboardRoutes = [
+  {
+    path: '/',
+    element: <Projects />,
+  },
+  {
+    path: 'settings',
+    element: <Settings />,
+  },
+  {
+    path: ':id',
+    element: <Project />,
+  },
+  {
+    path: 'create',
+    element: <CreateProject />,
+  },
+];