post table started

package.json

@@ -12,11 +12,12 @@
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-filterable-table": "^0.3.439",
     "react-icons": "^4.4.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "react-table": "^7.8.0"
   },
   "devDependencies": {
+    "@tanstack/react-table": "^8.5.13",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.0.1",

src/App.tsx

@@ -10,6 +10,7 @@ import "./assets/styles/style.scss";
 import Login from "./pages/Login";
 import Main from "./pages/Main";
 import Dashboard from "./pages/Dashboard";
+import Posts from "./pages/Posts";
 
 const App = () => {
   const [user, setUser] = useState({
@@ -33,6 +34,7 @@ const App = () => {
         <Routes>
           <Route path="/" element={<Main />} />
           <Route path="/dashboard" element={<Main child={<Dashboard />} />} />
+          <Route path="/posts" element={<Main child={<Posts />} />} />
           <Route path="/login" element={<Login />} />
         </Routes>
       </div>

src/assets/styles/_aside.scss

@@ -21,6 +21,7 @@
     flex-direction: column;
 
     &__element {
+      min-width: 13.12rem;
       @include transition-std;
       background: transparent;
       display: flex;

src/assets/styles/_dashboard.scss

@@ -17,7 +17,8 @@
   &__content {
     &__stats {
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(4, 1fr);
+      gap: 3rem;
     }
   }
 
@@ -45,7 +46,16 @@
   }
 
   &.yellow {
-    background: #c69500;
+    background: #ffc107;
+  }
+  &.black {
+    background: #161c2d;
+  }
+  &.green {
+    background: #42ba96;
+  }
+  &.violet {
+    background: #7c69ef;
   }
 
   span {

src/assets/styles/_general.scss

@@ -11,7 +11,7 @@
 .container {
   width: 100%;
   padding: 0 5rem;
-  max-width: 150rem;
+  max-width: 100%;
   margin: 0 auto;
   height: 100%;
 }

src/assets/styles/_nav.scss

@@ -1,5 +1,7 @@
 .nav {
   &__dropdown {
+    background: #f1f4f8;
+    z-index: 5;
     border-radius: 1rem;
     width: 100%;
     opacity: 0;

src/assets/styles/style.scss

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

src/components/PostTable.tsx

@@ -0,0 +1,8 @@
+import { useReactTable } from "@tanstack/react-table";
+
+const PostTable = () => {
+  // const table = useReactTable()
+  return <div></div>;
+};
+
+export default PostTable;

src/pages/Dashboard.tsx

@@ -21,6 +21,21 @@ const Dashboard = () => {
               text="Lorem, ipsum dolor sit amet consectetur adipisicing elit."
               topNumber={123}
             />
+            <StatCard
+              color="green"
+              text="Lorem, ipsum dolor sit amet consectetur adipisicing elit."
+              topNumber={123}
+            />
+            <StatCard
+              color="violet"
+              text="Lorem, ipsum dolor sit amet consectetur adipisicing elit."
+              topNumber={123}
+            />
+            <StatCard
+              color="black"
+              text="Lorem, ipsum dolor sit amet consectetur adipisicing elit."
+              topNumber={123}
+            />
           </div>
         </div>
       </div>

src/pages/Posts.tsx

@@ -0,0 +1,15 @@
+// Modules
+
+// Components
+
+const Posts = () => {
+  return (
+    <main className="posts">
+      <div className="container">
+        <div className="posts inner"></div>
+      </div>
+    </main>
+  );
+};
+
+export default Posts;