From e566bd75b8fa852bdf1a6dd14ed46d043f1d99ef Mon Sep 17 00:00:00 2001
From: Beesquit <sealreb@gmail.com>
Date: Mon, 22 Sep 2025 16:45:50 +0300
Subject: [PATCH] added all pages placeholders

---
 src/App.tsx                       | 22 +++++++++++----
 src/components/FormField.tsx      | 22 +++++++--------
 src/components/Sidebar.css        |  2 +-
 src/components/Sidebar.tsx        | 10 +++++--
 src/main.tsx                      | 10 +++----
 src/pages/acccount/account.css    | 14 +++++++++
 src/pages/acccount/account.tsx    | 15 ++++++++++
 src/pages/dashboard/dashboard.css |  6 +---
 src/pages/dashboard/dashboard.tsx |  4 +--
 src/pages/feeds/feeds.css         | 14 +++++++++
 src/pages/feeds/feeds.tsx         | 15 ++++++++++
 src/pages/groups/groups.css       | 14 +++++++++
 src/pages/groups/groups.tsx       | 15 ++++++++++
 src/pages/home/home.css           | 14 +++++++++
 src/pages/home/home.tsx           | 47 ++++++++++++++++---------------
 src/pages/login/login.tsx         |  4 +--
 src/pages/pictures/pictures.css   | 14 +++++++++
 src/pages/pictures/pictures.tsx   | 15 ++++++++++
 src/pages/register/register.tsx   |  2 +-
 src/pages/settings/settings.css   | 14 +++++++++
 src/pages/settings/settings.tsx   | 10 +++++--
 src/pages/users/users.css         | 14 +++++++++
 src/pages/users/users.tsx         | 15 ++++++++++
 23 files changed, 251 insertions(+), 61 deletions(-)
 create mode 100644 src/pages/acccount/account.css
 create mode 100644 src/pages/acccount/account.tsx
 create mode 100644 src/pages/feeds/feeds.css
 create mode 100644 src/pages/feeds/feeds.tsx
 create mode 100644 src/pages/groups/groups.css
 create mode 100644 src/pages/groups/groups.tsx
 create mode 100644 src/pages/home/home.css
 create mode 100644 src/pages/pictures/pictures.css
 create mode 100644 src/pages/pictures/pictures.tsx
 create mode 100644 src/pages/settings/settings.css
 create mode 100644 src/pages/users/users.css
 create mode 100644 src/pages/users/users.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 6bf5d27..13bc10f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Routes, Route, Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Outlet, useLocation, useNavigate } from "react-router-dom";
 import {useEffect, useState } from "react";
 
 import { ToastContainer } from "react-toastify";
@@ -10,14 +10,20 @@ import {
 
 import { AuthProvider } from "./auth/auth-provider"
 import ping from "./auth/ping";
+import useAuth from "./auth/auth";
 
 import Login from "./pages/login/login"
 import Register from "./pages/register/register"
 
 import Home from "./pages/home/home"
 import Dashboard from "./pages/dashboard/dashboard"
+import Users from "./pages/users/users";
+import Groups from "./pages/groups/groups";
+import Feeds from "./pages/feeds/feeds";
+import Pictures from "./pages/pictures/pictures";
+
+import Account from "./pages/acccount/account";
 import Settings from "./pages/settings/settings"
-import useAuth from './auth/auth';
 
 
 const PrivateRoute = () => {
@@ -78,9 +84,15 @@ function App() {
           <Route path="/register" element={<Register />} />
 
           <Route element={<PrivateRoute />}>
-            <Route path='/' element={<Home />} />
-            <Route path='/dashboard' element={<Dashboard />} />
-            <Route path='/settings' element={<Settings />} />
+            <Route path="/" element={<Home />} />
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/users" element={<Users />} />
+            <Route path="/groups" element={<Groups />} />
+            <Route path="/feeds" element={<Feeds />} />
+            <Route path="/pictures" element={<Pictures />} />
+
+            <Route path="/account" element={<Account />} />
+            <Route path="/settings" element={<Settings />} />
           </Route>
 
           <Route path="*" element={<h1 className="not-found">404 [#]<br/>Not Found</h1>} />
diff --git a/src/components/FormField.tsx b/src/components/FormField.tsx
index 1ca6fd6..1cf0ff1 100644
--- a/src/components/FormField.tsx
+++ b/src/components/FormField.tsx
@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
-import './FormField.css';
+import React, { useState } from "react";
+import "./FormField.css";
 
 
 interface FormFieldProperties {
-  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+  type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search";
   placeholder?: string;
   value: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -22,24 +22,24 @@ interface FormFieldProperties {
 
 
 const FormField: React.FC<FormFieldProperties> = ({
-  type = 'text',
+  type = "text",
   placeholder,
   value,
   onChange,
   required = false,
-  errorMessage = 'Please fill out this field',
+  errorMessage = "Please fill out this field",
   showError = false,
   onBlur,
   onFocus,
-  className = '',
+  className = "",
   disabled = false,
-  autoComplete = 'off',
+  autoComplete = "off",
   customValidator,
   showErrorInitially = false,
   icon: Icon,
 }) => {
   const [touched, setTouched] = useState<boolean>(showErrorInitially);
-  const [customError, setCustomError] = useState<string>('');
+  const [customError, setCustomError] = useState<string>("");
 
   const validateField = (value: string): string => {
     if (required && !value) {
@@ -51,7 +51,7 @@ const FormField: React.FC<FormFieldProperties> = ({
         return customValidation;
       }
     }
-    return '';
+    return "";
   };
 
   const shouldShowError = showError || (touched && validateField(value));
@@ -64,7 +64,7 @@ const FormField: React.FC<FormFieldProperties> = ({
   };
 
   const handleFocus = (e: React.FocusEvent<HTMLInputElement>): void => {
-    setCustomError('');
+    setCustomError("");
     onFocus?.(e);
   };
 
@@ -85,7 +85,7 @@ const FormField: React.FC<FormFieldProperties> = ({
         required={required}
         disabled={disabled}
         autoComplete={autoComplete}
-        className={shouldShowError ? 'error' : ''}
+        className={shouldShowError ? "error" : ""}
       />
       {shouldShowError && (
         <div className="error-message">
diff --git a/src/components/Sidebar.css b/src/components/Sidebar.css
index 1e11aa3..79de50a 100644
--- a/src/components/Sidebar.css
+++ b/src/components/Sidebar.css
@@ -2,7 +2,7 @@
   display: flex;
   top: 0;
   left: 0;
-  width: 240px;
+  width: 280px;
   height: 100%;
   background-color: var(--background-dark);
   box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 408b9f3..5ccc4e8 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
 import useLogout from "../auth/logout"
-import './Sidebar.css';
+import "./Sidebar.css";
 
 
 const Sidebar: React.FC = () => {
@@ -14,7 +14,10 @@ const Sidebar: React.FC = () => {
         <nav className="sidebar-nav">
           <a href="/" className="sidebar-link">Home</a>
           <a href="/dashboard" className="sidebar-link">Dashboard</a>
-          <a href="/user" className="sidebar-link">User</a>
+          <a href="/users" className="sidebar-link">Users</a>
+          <a href="/groups" className="sidebar-link">Groups</a>
+          <a href="/feeds" className="sidebar-link">Feeds</a>
+          <a href="/pictures" className="sidebar-link">Pictures</a>
         </nav>
       </div>
 
@@ -22,6 +25,7 @@ const Sidebar: React.FC = () => {
         <button onClick={useLogout()} className="sidebar-link logout-button">
           Logout
         </button>
+        <a href="/account" className="sidebar-link">Account</a>
         <a href="/settings" className="sidebar-link">Settings</a>
       </div>
     </div>
diff --git a/src/main.tsx b/src/main.tsx
index bef5202..86e0ef8 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,9 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import "./index.css"
+import App from "./App.tsx"
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,
diff --git a/src/pages/acccount/account.css b/src/pages/acccount/account.css
new file mode 100644
index 0000000..106c2f1
--- /dev/null
+++ b/src/pages/acccount/account.css
@@ -0,0 +1,14 @@
+.account {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100%;
+}
+
+.account-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/pages/acccount/account.tsx b/src/pages/acccount/account.tsx
new file mode 100644
index 0000000..011376f
--- /dev/null
+++ b/src/pages/acccount/account.tsx
@@ -0,0 +1,15 @@
+import "./account.css"
+import Sidebar from "../../components/Sidebar";
+
+const Account = () => {
+  return (
+    <div className="account">
+      <Sidebar/>
+      <div className="account-content">
+        <h2>Account</h2>
+      </div>
+    </div>
+  )
+}
+
+export default Account;
diff --git a/src/pages/dashboard/dashboard.css b/src/pages/dashboard/dashboard.css
index cc655f8..3d37858 100644
--- a/src/pages/dashboard/dashboard.css
+++ b/src/pages/dashboard/dashboard.css
@@ -2,11 +2,7 @@
   display: flex;
   width: 100vw;
   height: 100vh;
-  max-width:100%;
-}
-
-.sidebar-container {
-  display: flex;
+  max-width: 100%;
 }
 
 .dashboard-content {
diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx
index 6dce0f9..cb35946 100644
--- a/src/pages/dashboard/dashboard.tsx
+++ b/src/pages/dashboard/dashboard.tsx
@@ -4,9 +4,7 @@ import "./dashboard.css"
 const Dashboard = () => {
   return (
     <div className="dashboard">
-      <div>
-        <Sidebar/>
-      </div>
+      <Sidebar/>
       <div className="dashboard-content">
         <div className="dashboard-text">
           <h2>Dashboard Content<br/>WIP</h2>
diff --git a/src/pages/feeds/feeds.css b/src/pages/feeds/feeds.css
new file mode 100644
index 0000000..3b82003
--- /dev/null
+++ b/src/pages/feeds/feeds.css
@@ -0,0 +1,14 @@
+.feeds {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100%;
+}
+
+.feeds-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/pages/feeds/feeds.tsx b/src/pages/feeds/feeds.tsx
new file mode 100644
index 0000000..cd76caa
--- /dev/null
+++ b/src/pages/feeds/feeds.tsx
@@ -0,0 +1,15 @@
+import "./feeds.css"
+import Sidebar from "../../components/Sidebar";
+
+const Feeds = () => {
+  return (
+    <div className="feeds">
+      <Sidebar/>
+      <div className="feeds-content">
+        <h2>Feeds</h2>
+      </div>
+    </div>
+  )
+}
+
+export default Feeds;
diff --git a/src/pages/groups/groups.css b/src/pages/groups/groups.css
new file mode 100644
index 0000000..2d77e7f
--- /dev/null
+++ b/src/pages/groups/groups.css
@@ -0,0 +1,14 @@
+.groups {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100%;
+}
+
+.groups-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/pages/groups/groups.tsx b/src/pages/groups/groups.tsx
new file mode 100644
index 0000000..aa5fc9c
--- /dev/null
+++ b/src/pages/groups/groups.tsx
@@ -0,0 +1,15 @@
+import "./groups.css"
+import Sidebar from "../../components/Sidebar";
+
+const Groups = () => {
+  return (
+    <div className="groups">
+      <Sidebar/>
+      <div className="groups-content">
+        <h2>Groups</h2>
+      </div>
+    </div>
+  )
+}
+
+export default Groups;
diff --git a/src/pages/home/home.css b/src/pages/home/home.css
new file mode 100644
index 0000000..4dbb8cc
--- /dev/null
+++ b/src/pages/home/home.css
@@ -0,0 +1,14 @@
+.home {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100%;
+}
+
+.home-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx
index b6045c4..a9867b2 100644
--- a/src/pages/home/home.tsx
+++ b/src/pages/home/home.tsx
@@ -1,30 +1,31 @@
-import { Link } from 'react-router-dom';
-import useLogout from "../../auth/logout"
+import { Link } from "react-router-dom";
+import Sidebar from "../../components/Sidebar";
+import "./home.css"
 
 
 const Home = () => {
   return (
-    <div>
-      <h2>Home</h2>
-      <button onClick={useLogout()}>
-        Logout
-      </button>
-      <nav>
-        <ul>
-          <li>
-            <Link to="/">Home</Link>
-          </li>
-          <li>
-            <Link to="/login">Login</Link>
-          </li>
-          <li>
-            <Link to="/register">Register</Link>
-          </li>
-          <li>
-            <Link to="/dashboard">Dashboard</Link>
-          </li>
-        </ul>
-      </nav>
+    <div className="home">
+      <Sidebar/>
+      <div className="home-content">
+        <h2>Home</h2>
+        <nav>
+          <ul>
+            <li>
+              <Link to="/">Home</Link>
+            </li>
+            <li>
+              <Link to="/login">Login</Link>
+            </li>
+            <li>
+              <Link to="/register">Register</Link>
+            </li>
+            <li>
+              <Link to="/dashboard">Dashboard</Link>
+            </li>
+          </ul>
+        </nav>
+      </div>
     </div>
   )
 }
diff --git a/src/pages/login/login.tsx b/src/pages/login/login.tsx
index 6a1c0cc..df25fed 100644
--- a/src/pages/login/login.tsx
+++ b/src/pages/login/login.tsx
@@ -17,7 +17,7 @@ const Login = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const searchPath = new URLSearchParams(location.search);
-  const redirectPath = searchPath.get('to') || "/";
+  const redirectPath = searchPath.get("to") || "/";
 
   const [usernameEmpty, setUsernameEmpty] = useState(false);
   const [passwordEmpty, setPasswordEmpty] = useState(false);
@@ -54,7 +54,7 @@ const Login = () => {
       </div>
       <div className="login-left">
         <video className="login-video" autoPlay loop muted>
-          <source src={"./login-video.mp4"} type='video/mp4' />
+          <source src={"./login-video.mp4"} type="video/mp4" />
         </video>
       </div>
       <div className="login-right">
diff --git a/src/pages/pictures/pictures.css b/src/pages/pictures/pictures.css
new file mode 100644
index 0000000..60775fa
--- /dev/null
+++ b/src/pages/pictures/pictures.css
@@ -0,0 +1,14 @@
+.pictures {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100%;
+}
+
+.pictures-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/pages/pictures/pictures.tsx b/src/pages/pictures/pictures.tsx
new file mode 100644
index 0000000..3784ba2
--- /dev/null
+++ b/src/pages/pictures/pictures.tsx
@@ -0,0 +1,15 @@
+import "./pictures.css"
+import Sidebar from "../../components/Sidebar";
+
+const Pictures = () => {
+  return (
+    <div className="pictures">
+      <Sidebar/>
+      <div className="pictures-content">
+        <h2>Pictures</h2>
+      </div>
+    </div>
+  )
+}
+
+export default Pictures;
diff --git a/src/pages/register/register.tsx b/src/pages/register/register.tsx
index c9b965b..f9b4bb4 100644
--- a/src/pages/register/register.tsx
+++ b/src/pages/register/register.tsx
@@ -17,7 +17,7 @@ const Register = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const searchPath = new URLSearchParams(location.search);
-  const redirectPath = searchPath.get('to') || "/";
+  const redirectPath = searchPath.get("to") || "/";
 
   const [usernameEmpty, setUsernameEmpty] = useState(false);
   const [passwordEmpty, setPasswordEmpty] = useState(false);
diff --git a/src/pages/settings/settings.css b/src/pages/settings/settings.css
new file mode 100644
index 0000000..c893b1f
--- /dev/null
+++ b/src/pages/settings/settings.css
@@ -0,0 +1,14 @@
+.settings {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100%;
+}
+
+.settings-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/pages/settings/settings.tsx b/src/pages/settings/settings.tsx
index d184190..3eeb6ca 100644
--- a/src/pages/settings/settings.tsx
+++ b/src/pages/settings/settings.tsx
@@ -1,7 +1,13 @@
+import "./settings.css"
+import Sidebar from "../../components/Sidebar";
+
 const Settings = () => {
   return (
-    <div>
-      <h2>Settings</h2>
+    <div className="settings">
+      <Sidebar/>
+      <div className="settings-content">
+        <h2>Settings</h2>
+      </div>
     </div>
   )
 }
diff --git a/src/pages/users/users.css b/src/pages/users/users.css
new file mode 100644
index 0000000..1ce3c52
--- /dev/null
+++ b/src/pages/users/users.css
@@ -0,0 +1,14 @@
+.users {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100%;
+}
+
+.users-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/pages/users/users.tsx b/src/pages/users/users.tsx
new file mode 100644
index 0000000..02f762c
--- /dev/null
+++ b/src/pages/users/users.tsx
@@ -0,0 +1,15 @@
+import "./users.css"
+import Sidebar from "../../components/Sidebar";
+
+const Users = () => {
+  return (
+    <div className="users">
+      <Sidebar/>
+      <div className="users-content">
+        <h2>Users</h2>
+      </div>
+    </div>
+  )
+}
+
+export default Users;