diff --git a/src/Content/context.js b/src/Content/context.js new file mode 100644 index 0000000..6118903 --- /dev/null +++ b/src/Content/context.js @@ -0,0 +1,30 @@ +// ThemeContext.js +import React, { createContext, useState, useEffect } from 'react'; + +export const ThemeContext = createContext(); + +export const ThemeProvider = ({ children }) => { + const [theme, setTheme] = useState(() => { + return localStorage.getItem('theme') || 'light'; + }); + + useEffect(() => { + localStorage.setItem('theme',theme) + if(theme=='light'){ + document.getElementsByTagName('body')[0].className=''; + } else{ + + document.getElementsByTagName('body')[0].className='active'; + } + }, [theme]); + + const toggleTheme = () => { + setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')); + }; + + return ( + + {children} + + ); +}; diff --git a/src/components/about/About.jsx b/src/components/about/About.jsx index d587fdd..5c40f9c 100644 --- a/src/components/about/About.jsx +++ b/src/components/about/About.jsx @@ -1,16 +1,21 @@ // src/About.js -import React from 'react'; +import React, { useContext } from 'react'; import './about.css'; import Header from '../../pages/header'; import image from '../../assets/book.png' import resource from '../../assets/resource.png' import benefit from '../../assets/benefits.png' import { Link } from 'react-router-dom'; +import { ThemeContext } from '../../Content/context'; // import sun from './images/sun.png'; // Example image import // import moon from './images/moon.png'; // Example image import const About = () => { + let {theme}=useContext(ThemeContext) + if(theme=='dark'){ + document.getElementsByTagName('body')[0].classList.toggle('active') + } return ( <>
diff --git a/src/components/login/LoginSignup.css b/src/components/login/LoginSignup.css index 117834e..1ca0f09 100644 --- a/src/components/login/LoginSignup.css +++ b/src/components/login/LoginSignup.css @@ -4,6 +4,38 @@ background: #E6E6FA; padding: 50px; } +.active{ + background-color: #000016 !important; + color: white !important; + } + .active div , .active button{ + background-color: #000016 !important; + color: white !important; + + } + .active .card , .active .book ,.active .box , .active .ag-courses-item_title, .active .ag-courses_item { + background-color: #000000 !important; + color: white !important; + box-shadow: 0px 0px 15px lightblue; + + } + .active .text-box-in , .active div{ + color: white !important; + } + .active .ag-courses-item_bg{ + background-color: #f9b234 !important; + } + .active .loginsignup-cointainer{ + border: white solid 2px ; + box-shadow: 0px 0px 15px white; + } + .active button{ + border: solid 1px white; + box-shadow: 0px 0px 15px lightblue; + } + .active h1, .active h2 , .active p,.active b{ + color: white !important; + } .loginsignup-cointainer{ width: 580px; height: auto; diff --git a/src/components/login/LoginSignup.jsx b/src/components/login/LoginSignup.jsx index ab529b6..573cb4f 100644 --- a/src/components/login/LoginSignup.jsx +++ b/src/components/login/LoginSignup.jsx @@ -1,10 +1,11 @@ -import React, { useState } from "react"; +import React, { useContext, useState } from "react"; import { Link } from "react-router-dom"; // Import Link import { FaArrowLeft } from "react-icons/fa"; // Import Font Awesome arrow left icon import "./LoginSignup.css"; import { FaEye, FaEyeSlash } from 'react-icons/fa6' +import { ThemeContext } from "../../Content/context"; const LoginSignup = () => { - + let {theme}=useContext(ThemeContext) const [state, setState] = useState("Sign Up"); const [isVisible, setIsVisible] = useState(false); @@ -94,7 +95,7 @@ const LoginSignup = () => { } }; return ( -
+
{ + return localStorage.getItem('mode'); + }); + useEffect(() => { + const handleStorageChange = (event) => { + if (event.key === 'mode') { + setValue(event.newValue); + } + console.log('mpde') + }; + + window.addEventListener('storage', ()=>console.log('dfdfdf')); + + return () => { + window.removeEventListener('storage', handleStorageChange); + }; + }); + return (

Visit your year

-
+
- - @@ -30,13 +52,13 @@ function Home() {
- - diff --git a/src/components/review/review.css b/src/components/review/review.css index 46b6af6..1f93e69 100644 --- a/src/components/review/review.css +++ b/src/components/review/review.css @@ -329,3 +329,15 @@ section width: 100%; } } + +input[type=radio]{ + display: none; +} + +.star{ + cursor: pointer; +} + +label{ + margin-bottom: 0.4rem; +} diff --git a/src/components/review/review.jsx b/src/components/review/review.jsx index 163e30f..0b1f01a 100644 --- a/src/components/review/review.jsx +++ b/src/components/review/review.jsx @@ -1,10 +1,14 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { ToastContainer, toast } from 'react-toastify'; import { Link } from "react-router-dom"; // Import Link +import { FaStar } from "react-icons/fa"; import 'react-toastify/dist/ReactToastify.css'; import './review.css'; const ReviewPage = () => { + const [rating, setRating] = useState(null); + const [hover, setHover] = useState(null); + const [formData, setFormData] = useState({ name: '', email: '', @@ -12,6 +16,10 @@ const ReviewPage = () => { review: '' }); + useEffect(() => { + setFormData({ ...formData, rating: rating }); + }, [rating]); + const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; @@ -48,6 +56,7 @@ const ReviewPage = () => { rating: '', review: '' }); + setRating(null); }; return ( @@ -96,9 +105,27 @@ const ReviewPage = () => {
+
- - Rating (1-5) + {[...Array(5)].map((star, index) => { + const currentRating = index + 1; + return ( + + ); + })}
@@ -115,4 +142,4 @@ const ReviewPage = () => { ); }; -export default ReviewPage; \ No newline at end of file +export default ReviewPage; diff --git a/src/index.js b/src/index.js index c485772..60757c5 100644 --- a/src/index.js +++ b/src/index.js @@ -33,6 +33,7 @@ import { import "./index.css"; import LoginSignup from './components/login/LoginSignup.jsx'; import ReviewPage from './components/review/review.jsx'; +import { ThemeContext, ThemeProvider } from './Content/context.js'; // const ThemeContext = createContext(); @@ -160,7 +161,10 @@ ReactDOM.createRoot(document.getElementById("root")).render( + + + {/* {children} diff --git a/src/pages/header.js b/src/pages/header.js index 4a2e4e0..1c0bd0a 100644 --- a/src/pages/header.js +++ b/src/pages/header.js @@ -1,13 +1,21 @@ -import React from 'react' +import React, { useContext } from 'react' import './header.css'; import {Link} from "react-router-dom"; import { colors } from '@mui/material'; +import { ThemeContext } from '../Content/context'; // import { useTheme } from '../index'; - +import {HiSun,HiMoon} from 'react-icons/hi2' function Header() { - + let {theme,toggleTheme} =useContext(ThemeContext) + function handleClick(e){ + if(theme=="dark"){ + toggleTheme('light') + }else{ + toggleTheme('dark') + } + } // const {isDarkMode, togglerDarkMode} =useTheme(); return ( @@ -28,6 +36,10 @@ function Header() { About Us + { + + theme=='dark'? : + }