set up pages and routes

package.json

@@ -16,7 +16,9 @@
   "dependencies": {
     "axios": "^1.6.7",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.0.0",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.25.9",

src/App.jsx

@@ -1,27 +1,82 @@
-import React, { useState, useEffect } from 'react';
-import { getAllData } from './util/index';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-const URL = 'http://localhost:8000/api/v1/';
+import {
+    AddDrug,
+    AdminAddUser,
+    Alerts,
+    Dashboard,
+    DispenseDrug,
+    Landing,
+    Login,
+    Register,
+    Reports,
+    Store,
+    User,
+    Error,
+    EditDrug,
+    HomeLayout,
+} from './pages';
 
-function App() {
-    const [message, setMessage] = useState('');
+const router = createBrowserRouter([
+    {
+        path: '/',
+        element: <HomeLayout />,
+        errorElement: <Error />,
+        children: [
+            {
+                index: true,
+                element: <Landing />,
+            },
+            {
+                path: 'dashboard',
+                element: <Dashboard />,
+            },
+            {
+                path: 'register',
+                element: <Register />,
+            },
+            {
+                path: 'login',
+                element: <Login />,
+            },
+        ],
+    },
 
-    useEffect(() => {
-        (async () => {
-            const myData = await getAllData(URL);
-            setMessage(myData.data);
-        })();
-
-        return () => {
-            console.log('unmounting');
-        };
-    }, []);
-
-    return (
-        <>
-            <h1>{message}</h1>
-        </>
-    );
-}
+    {
+        path: '/alerts',
+        element: <Alerts />,
+    },
+    {
+        path: '/adddrug',
+        element: <AddDrug />,
+    },
+    {
+        path: '/editdrug',
+        element: <EditDrug />,
+    },
+    {
+        path: '/dispense',
+        element: <DispenseDrug />,
+    },
+    {
+        path: '/store',
+        element: <Store />,
+    },
+    {
+        path: '/user',
+        element: <User />,
+    },
+    {
+        path: '/adminuser',
+        element: <AdminAddUser />,
+    },
+    {
+        path: '/reports',
+        element: <Reports />,
+    },
+]);
 
+const App = () => {
+    return <RouterProvider router={router} />;
+};
 export default App;

src/index.css

@@ -0,0 +1,193 @@
+/* GLOBAL STYLES  */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 100%;
+} /*16px*/
+
+:root {
+    /* main colors */
+    --color-green-dark: #519872;
+    --color-green-med: #a4b494;
+    --color-green-light: #bec5ad;
+    --color-blue-dark: #28535c;
+    --color-blue-light: #356a82;
+
+    /* OTHER colors */
+    --primary-50: #e0fcff;
+    --primary-100: #bef8fd;
+    --primary-200: #87eaf2;
+    --primary-300: #54d1db;
+    --primary-400: #38bec9;
+    --primary-500: #2cb1bc;
+    --primary-600: #14919b;
+    --primary-700: #0e7c86;
+    --primary-800: #0a6c74;
+    --primary-900: #044e54;
+
+    /* greys */
+    --grey-50: #f8fafc;
+    --grey-100: #f1f5f9;
+    --grey-200: #e2e8f0;
+    --grey-300: #cbd5e1;
+    --grey-400: #94a3b8;
+    --grey-500: #64748b;
+    --grey-600: #475569;
+    --grey-700: #334155;
+    --grey-800: #1e293b;
+    --grey-900: #0f172a;
+    /* rest of the colors */
+    --black: #222;
+    --white: #fff;
+    /* DEFAULTS */
+    --background-color: --grey-50;
+    --text-color: #222;
+
+    /* OTHERS */
+    --border-radius: 0.4rem;
+    --letter-spacing: 1px;
+    --transition: 0.3s ease-in-out all;
+    --max-width: 1120px;
+    --fixed-width: 600px;
+    --fluid-width: 90vw;
+    /* box shadow*/
+    --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --nav-height: 6rem;
+    /* TEXT */
+    --small-text: 0.875rem;
+    --extra-small-text: 0.7em;
+}
+
+body {
+    background: var(--grey-50);
+    color: var(--text-color);
+    font-family: Roboto, sans-serif;
+    font-weight: 400;
+    line-height: 1;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    margin: 0;
+    font-weight: 400;
+    line-height: 1;
+    letter-spacing: var(--letter-spacing);
+}
+
+h1 {
+    font-size: clamp(2rem, 5vw, 5rem); /* Large heading */
+}
+
+h2 {
+    font-size: clamp(1.5rem, 3vw, 3rem); /* Medium heading */
+}
+
+h3 {
+    font-size: clamp(1.25rem, 2.5vw, 2.5rem); /* Small heading */
+}
+
+h4 {
+    font-size: clamp(1rem, 2vw, 2rem); /* Extra small heading */
+}
+
+h5 {
+    font-size: clamp(0.875rem, 1.5vw, 1.5rem); /* Tiny heading */
+}
+
+a {
+    text-decoration: none;
+}
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.img {
+    width: 100%;
+    display: block;
+    object-fit: cover;
+}
+
+/* BUTTONS */
+.btn {
+    cursor: pointer;
+    color: var(--white);
+    background: var(--grey-600);
+    border: transparent;
+    border-radius: var(--border-radius);
+    letter-spacing: var(--letter-spacing);
+    padding: 1rem 4rem;
+    box-shadow: var(--shadow-1);
+    transition: var(--transition);
+    text-transform: capitalize;
+    display: inline-block;
+}
+.btn:hover {
+    background: var(--grey-600);
+    box-shadow: var(--shadow-3);
+}
+
+.btn-block {
+    width: 100%;
+}
+
+/* FORMS */
+
+.form {
+    width: 90vw;
+    max-width: var(--fixed-width);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-2);
+    padding: 2rem 2.5rem;
+    margin: 3rem auto;
+}
+.form-label {
+    display: block;
+    font-size: var(--small-text);
+    margin-bottom: 0.75rem;
+    text-transform: capitalize;
+    letter-spacing: var(--letter-spacing);
+    line-height: 1.5;
+}
+.form-input,
+.form-textarea,
+.form-select {
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    border-radius: var(--border-radius);
+    background: var(--grey-600);
+    border: 1px solid var(--grey-300);
+    color: var(--text-color);
+}
+.form-input,
+.form-select,
+.form-btn {
+    height: 35px;
+}
+.form-row {
+    margin-bottom: 1rem;
+}
+
+.form-textarea {
+    height: 7rem;
+}
+
+.title {
+    text-align: center;
+}
+
+.container {
+    width: var(--fluid-width);
+    max-width: var(--max-width);
+    margin: 0 auto;
+}

src/pages/AddDrug.jsx

@@ -0,0 +1,9 @@
+const AddDrug = () => {
+    return (
+        <div>
+            <h1>Add Drug</h1>
+        </div>
+    );
+};
+
+export default AddDrug;

src/pages/AdminAddUser.jsx

@@ -0,0 +1,9 @@
+const AdminAddUser = () => {
+    return (
+        <div>
+            <h1>Admin Add Drug</h1>
+        </div>
+    );
+};
+
+export default AdminAddUser;

src/pages/Alerts.jsx

@@ -0,0 +1,9 @@
+const Alerts = () => {
+    return (
+        <div>
+            <h1>Alerts</h1>
+        </div>
+    );
+};
+
+export default Alerts;

src/pages/Dashboard.jsx

@@ -0,0 +1,9 @@
+const Dashboard = () => {
+    return (
+        <div>
+            <h1>Dashboard</h1>
+        </div>
+    );
+};
+
+export default Dashboard;

src/pages/DispenseDrug.jsx

@@ -0,0 +1,9 @@
+const DispenseDrug = () => {
+    return (
+        <div>
+            <h1>Dispense a drug</h1>
+        </div>
+    );
+};
+
+export default DispenseDrug;

src/pages/EditDrug.jsx

@@ -0,0 +1,9 @@
+const EditDrug = () => {
+    return (
+        <div>
+            <h1>Edit Drug</h1>
+        </div>
+    );
+};
+
+export default EditDrug;

src/pages/Error.jsx

@@ -0,0 +1,14 @@
+import { Link, useRouteError } from 'react-router-dom';
+
+const Error = () => {
+    const error = useRouteError();
+    console.log(error);
+    return (
+        <>
+            <h1>Error Page</h1>
+            <Link to="/">Back Home</Link>
+        </>
+    );
+};
+
+export default Error;

src/pages/HomeLayout.jsx

@@ -0,0 +1,11 @@
+import { Outlet } from 'react-router-dom';
+
+const HomeLayout = () => {
+    return (
+        <div>
+            <Outlet />
+        </div>
+    );
+};
+
+export default HomeLayout;