From bb02f4956681049c06726c2d4dcd41e33d0b79b7 Mon Sep 17 00:00:00 2001 From: Trailblazer09 Date: Wed, 23 Jul 2025 11:43:02 +0530 Subject: [PATCH 01/17] added theme switch --- src/App.tsx | 13 +- src/Routes/Login/Login.tsx | 86 ++++++ src/Routes/Router.tsx | 26 +- src/components/Navbar.tsx | 39 ++- src/hooks/useTheme.ts | 31 ++ src/main.tsx | 23 +- src/pages/About/About.tsx | 4 +- src/pages/Contact/Contact.tsx | 281 +++++++++--------- src/pages/Contributors/Contributors.tsx | 63 ++-- src/pages/Home/Home.tsx | 366 ++++++++++++------------ src/theme.ts | 21 ++ tailwind.config.js | 16 +- 12 files changed, 559 insertions(+), 410 deletions(-) create mode 100644 src/Routes/Login/Login.tsx create mode 100644 src/hooks/useTheme.ts create mode 100644 src/theme.ts diff --git a/src/App.tsx b/src/App.tsx index e9adacf..83f2557 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,21 +2,24 @@ import Navbar from "./components/Navbar"; import Footer from "./components/Footer"; import ScrollProgressBar from './components/ScrollProgressBar'; import { Toaster } from "react-hot-toast"; +import { useTheme } from "./hooks/useTheme"; import Router from "./Routes/Router"; function App() { + const { theme, setTheme } = useTheme(); + return ( -
+
{/* Navbar */} {/* Main content */} -
- +
+
{/* Footer */} @@ -48,3 +51,7 @@ function App() { } export default App; + + + + diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx new file mode 100644 index 0000000..1071400 --- /dev/null +++ b/src/Routes/Login/Login.tsx @@ -0,0 +1,86 @@ +import React, { useState, ChangeEvent, FormEvent } from "react"; +import axios from "axios"; +import { useNavigate } from "react-router-dom"; // Import the hook for navigation + +const backendUrl = import.meta.env.VITE_BACKEND_URL; +interface LoginFormData { + email: string; + password: string; +} + +const Login: React.FC = () => { + const [formData, setFormData] = useState({ + email: "", + password: "", + }); + const [message, setMessage] = useState(""); + + const navigate = useNavigate(); // Initialize the navigate hook + + const handleChange = (e: ChangeEvent) => { + const { name, value } = e.target; + setFormData({ ...formData, [name]: value }); + }; + + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); + try { + const response = await axios.post( + `${backendUrl}/api/auth/login`, + formData + ); + setMessage(response.data.message); // Show success message from backend + + // Navigate to /home if login is successful + if (response.data.message === "Login successful") { + navigate("/home"); + } + } catch (error: any) { + setMessage(error.response?.data?.message || "Something went wrong"); + } + }; + + return ( +
+
+

Login

+ + +
+ +
+ +
+
+ +
+ +
+ {message &&

{message}

} +
+
+ ); +}; + +export default Login; diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx index 007d11d..9f1b4f7 100644 --- a/src/Routes/Router.tsx +++ b/src/Routes/Router.tsx @@ -1,23 +1,29 @@ -import { Navigate, Route, Routes } from "react-router-dom"; +import { Navigate, Route, Routes } from "react-router-dom" +import Home from "../pages/Home/Home" +import About from "../pages/About/About" +import Contact from "../pages/Contact/Contact" +import Contributors from "../pages/Contributors/Contributors" +import Signup from "../pages/Signup/Signup.tsx" +import Login from "../pages/Login/Login.tsx" +import UserProfile from "../pages/UserProfile/UserProfile.tsx" + + +interface RouterProps { + theme: string; +} + +const Router: React.FC = ({ theme }) => { -import Home from "../pages/Home/Home"; // Import the Home component -import About from "../pages/About/About"; // Import the About component -import Contact from "../pages/Contact/Contact"; // Import the Contact component -import Contributors from "../pages/Contributors/Contributors"; -import Signup from "../pages/Signup/Signup.tsx"; -import Login from "../pages/Login/Login.tsx"; -import UserProfile from "../pages/UserProfile/UserProfile.tsx"; -const Router = () => { return ( {/* Redirect from root (/) to the home page */} } /> } /> } /> + } /> } /> } /> - } /> } /> } /> diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 9e9c2b2..c960ec3 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,20 +1,22 @@ -import { Link } from 'react-router-dom'; -import { useState } from 'react'; +import { Link } from "react-router-dom"; +import { useState } from "react"; +import { useTheme } from "../hooks/useTheme"; const Navbar: React.FC = () => { const [isOpen, setIsOpen] = useState(false); + const { theme, setTheme } = useTheme(); return ( -