From 8279a588d5dc14ef8e95e97c9c0e6b0384600003 Mon Sep 17 00:00:00 2001 From: Rajashekar Reddy gunda Date: Sun, 13 Oct 2024 14:48:20 +0530 Subject: [PATCH 1/2] done --- src/App.jsx | 47 ++++++++++++++++++++---------- src/componenets/NotFound/index.css | 21 +++++++++++++ src/componenets/NotFound/index.js | 16 ++++++++++ 3 files changed, 68 insertions(+), 16 deletions(-) create mode 100644 src/componenets/NotFound/index.css create mode 100644 src/componenets/NotFound/index.js diff --git a/src/App.jsx b/src/App.jsx index bad29d41..b0850805 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,12 @@ import { useState, useEffect } from 'react' import { useDispatch } from 'react-redux' import './App.css' -import authService from "./appwrite/auth" -import { login, logout } from "./store/authSlice" +import authService from './appwrite/auth' +import { login, logout } from './store/authSlice' import { Footer, Header } from './componenets' -import { Outlet } from 'react-router-dom' +import { Routes, Route, Outlet, Navigate } from 'react-router-dom' import BackToTopButton from './components/ui/BackToTopButton' +import NotFound from './componenets/NotFound' function App() { const [loading, setLoading] = useState(true) @@ -21,20 +22,34 @@ function App() { } }) .finally(() => setLoading(false)) - }, []) + }, [dispatch]) - return !loading ? ( -
-
- -
-
- -
-
-
+ if (loading) return null + + return ( +
+ + {/* Public Routes with Header, Footer, and Outlet */} + + +
+
+ +
+
+ + }> + {/* Add other valid routes here */} + Home Page} /> + User Profile} /> + + + {/* Route for invalid URLs */} + } /> +
- ) : null + ) } -export default App \ No newline at end of file +export default App diff --git a/src/componenets/NotFound/index.css b/src/componenets/NotFound/index.css new file mode 100644 index 00000000..d153b7bf --- /dev/null +++ b/src/componenets/NotFound/index.css @@ -0,0 +1,21 @@ + +.not-found-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 70vh; + } + .not-found-img { + width: 400px; + } + .button { + padding: 10px 20px; + font-size: 16px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + } + diff --git a/src/componenets/NotFound/index.js b/src/componenets/NotFound/index.js new file mode 100644 index 00000000..fb920c97 --- /dev/null +++ b/src/componenets/NotFound/index.js @@ -0,0 +1,16 @@ +import './index.css' +import {Link} from 'react-router-dom' +const NotFound = () => ( +
+ not found + + + +
+) + +export default NotFound From dbe9a6e2e1aa220d3cdc5b12c78690ebb02fd0f5 Mon Sep 17 00:00:00 2001 From: Rajashekar Reddy gunda Date: Sun, 13 Oct 2024 14:54:38 +0530 Subject: [PATCH 2/2] done --- src/componenets/Header/Header.jsx | 171 ++++++++++++------------------ 1 file changed, 68 insertions(+), 103 deletions(-) diff --git a/src/componenets/Header/Header.jsx b/src/componenets/Header/Header.jsx index 82959002..b3e4f57f 100644 --- a/src/componenets/Header/Header.jsx +++ b/src/componenets/Header/Header.jsx @@ -3,21 +3,19 @@ import { Link } from "react-router-dom"; import { useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { Container, Logo, LogoutBtn } from "../index"; -import { FaBars, FaTimes } from "react-icons/fa"; // For hamburger icon +import { FaBars, FaTimes, FaSun, FaMoon } from "react-icons/fa"; // Import icons function Header() { const authStatus = useSelector((state) => state.auth.status); const navigate = useNavigate(); - // State to track theme mode const [isDarkMode, setIsDarkMode] = useState(false); - const [menuOpen, setMenuOpen] = useState(false); // State for hamburger menu - const [isSticky, setIsSticky] = useState(false); // State for sticky navbar + const [menuOpen, setMenuOpen] = useState(false); + const [isSticky, setIsSticky] = useState(false); useEffect(() => { const handleScroll = () => { if (window.scrollY > window.innerHeight * 0.1) { - // 10vh setIsSticky(true); } else { setIsSticky(false); @@ -25,16 +23,11 @@ function Header() { }; window.addEventListener("scroll", handleScroll); - - return () => { - window.removeEventListener("scroll", handleScroll); - }; + return () => window.removeEventListener("scroll", handleScroll); }, []); - /* Toggle Text Color */ - const toggleTextColor = () => { + const toggleTheme = () => { const rootElement = document.getElementById("root"); - // Toggle text color for the root rootElement.classList.toggle("white-color"); const footerLinks = document.getElementsByClassName("toggle"); @@ -43,114 +36,89 @@ function Header() { link.classList.toggle("text-alice-blue-900"); }); - // Toggle background and text color for custom screen elements const screenElements = document.querySelectorAll(".custom-theme"); - screenElements.forEach((screenElement) => { - screenElement.classList.toggle("dark-mode-bg"); // Toggle background color - screenElement.classList.toggle("light-text"); // Toggle text color + screenElements.forEach((el) => { + el.classList.toggle("dark-mode-bg"); + el.classList.toggle("light-text"); }); - // Toggle between dark and light mode setIsDarkMode(!isDarkMode); }; const navItems = [ - { - name: "Home", - slug: "/", - active: true, - }, - { - name: "Login", - slug: "/login", - active: !authStatus, - }, - { - name: "Signup", - slug: "/signup", - active: !authStatus, - }, - { - name: "Profile", - slug: "/profile", - active: !authStatus, - }, - { - name: "All Posts", - slug: "/all-posts", - active: authStatus, - }, - { - name: "Add Post", - slug: "/add-post", - active: authStatus, - }, + { name: "Home", slug: "/", active: true }, + { name: "Login", slug: "/login", active: !authStatus }, + { name: "Signup", slug: "/signup", active: !authStatus }, + { name: "Profile", slug: "/profile", active: !authStatus }, + { name: "All Posts", slug: "/all-posts", active: authStatus }, + { name: "Add Post", slug: "/add-post", active: authStatus }, ]; - // Toggle the hamburger menu const toggleMenu = () => setMenuOpen(!menuOpen); return ( <> -
+
-