details page

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+

src/App.tsx

@@ -11,6 +11,7 @@ import Login from "./pages/Login";
 import Main from "./pages/Main";
 import Dashboard from "./pages/Dashboard";
 import Posts from "./pages/Posts";
+import Details from "./pages/Details";
 
 const App = () => {
   const [user, setUser] = useState({
@@ -35,6 +36,7 @@ const App = () => {
           <Route path="/" element={<Main />} />
           <Route path="/dashboard" element={<Main child={<Dashboard />} />} />
           <Route path="/posts" element={<Main child={<Posts />} />} />
+          <Route path="/user_details" element={<Main child={<Details />} />} />
           <Route path="/login" element={<Login />} />
         </Routes>
       </div>

src/assets/styles/_details.scss

@@ -0,0 +1,36 @@
+.details {
+  &.inner {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+  }
+
+  &__data {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+
+    &__block {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 0.6rem;
+    }
+
+    label {
+      font-size: 2rem;
+    }
+
+    input {
+      padding: 0.7rem 1rem;
+      border: 0.1rem solid #cccccc;
+      border-radius: 0.5rem;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+  }
+}

src/assets/styles/_general.scss

@@ -42,6 +42,12 @@ button {
   border: none;
 }
 
+button:disabled {
+  background: #d4d4d4 !important;
+  border: none !important;
+  cursor: not-allowed;
+}
+
 a {
   color: #000;
   text-decoration: none;

src/assets/styles/style.scss

@@ -5,3 +5,4 @@
 @import "./aside";
 @import "./dashboard";
 @import "./posts";
+@import "./details";

src/pages/Details.tsx

@@ -0,0 +1,48 @@
+// Modules
+import React, { useContext, useState, useEffect } from "react";
+import { UserContext } from "../context/UserContext";
+
+// Icons
+import { CgDetailsLess } from "react-icons/cg";
+import { userContextType } from "../types/user";
+
+const Details = () => {
+  const { user } = useContext<userContextType>(UserContext);
+
+  return (
+    <main className="details">
+      <div className="container">
+        <div className="details inner">
+          <div className="dashboard__head">
+            <CgDetailsLess className="dashboard__img" />
+            <h1>Details</h1>
+          </div>
+          <div className="details__content">
+            <form className="details__data">
+              <div className="details__data__block">
+                <label htmlFor="user">Username</label>
+                <input
+                  type="text"
+                  id="user"
+                  value={user.username}
+                  readOnly={true}
+                />
+              </div>
+              <div className="details__data__block">
+                <label htmlFor="access">Access</label>
+                <input
+                  type="text"
+                  id="access"
+                  value={user.accessLevel}
+                  readOnly={true}
+                />
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Details;

src/pages/Login.tsx

@@ -3,12 +3,10 @@ import React, { useState, useEffect, useContext } from "react";
 import { UserContext } from "../context/UserContext";
 import { useNavigate } from "react-router-dom";
 
-const Login = () => {
-  const cred: Record<string, string> = {
-    username: "admin_2022",
-    password: "backpackadmin",
-  };
+// Credits
+import { cred } from "../user";
 
+const Login = () => {
   const [valid, setValid] = useState({
     username: "",
     password: "",

src/user.ts

@@ -0,0 +1,9 @@
+interface credType {
+  username: string;
+  password: string;
+}
+
+export const cred: credType = {
+  username: "admin",
+  password: "admin@tps",
+};