Untitled
unknown
plain_text
a year ago
6.8 kB
7
Indexable
// Dashboard.jsx import React, { useState, useEffect } from 'react'; import { useNavigate,Link } from 'react-router-dom'; import Button from '@mui/material/Button'; import './Dashboard.css'; const api = { key: "95d7fb89913501eb128ba6c87da49a8e", base: "https://api.openweathermap.org/data/2.5/", }; const Dashboard = () => { const navi = useNavigate(); const [isHamburgerOpen, setHamburgerOpen] = useState(false); const [isLoggedIn,setIsLoggedIn] = useState(sessionStorage.getItem('isLoggedIn')); const [search, setSearch] = useState(""); const [weather, setWeather] = useState({}); const handleLogout = () => { navi('/'); sessionStorage.removeItem('isLoggedIn'); sessionStorage.removeItem('uploadedImages'); }; const toggleHamburger = () => { setHamburgerOpen(!isHamburgerOpen); }; const clearStorage=()=>{ const confirmdelete=window.confirm("Are you sure to delete?"); if(confirmdelete) { sessionStorage.removeItem('uploadedImages'); } }; useEffect(() => { if (!isLoggedIn) { navi('/'); } else{ navi('/Dashboard'); } }, [isLoggedIn, navi]); const searchPressed = () => { fetch(`${api.base}weather?q=${search}&units=metric&APPID=${api.key}`) .then((res) => res.json()) .then((result) => { setWeather(result); }); }; return ( <> <header className="dashboard-header"> <div className="dashboard-hamburger" onClick={toggleHamburger}> <div></div> <div></div> <div></div> </div> <nav className={`dashboard-nav ${isHamburgerOpen ? 'open' : ''}`}> <div className="dashboard-nav-left"> <ul> <li> <Link to="/Dashboard">Home</Link> </li> <li> <Link to="/ImageUpload">ImageUpload</Link> </li> <li> <Link to="/FetchImage">Images</Link> </li> <li> {/* <Link to="//clearStorage">Clear Storage</Link> */} <a href="#" onClick={clearStorage}>clear storage</a> </li> <li> <a href="#" onClick={handleLogout}>Logout</a> </li> </ul> {/* <br /> <Button className='bbnow' variant="contained" onClick={() => navi('/ImageUpload')}> ImageUpload </Button> <br /> <br /> <Button className='bbnow' variant="contained" onClick={() => navi('/FetchImage')}> Images </Button> <br /> <br /> <Button className='bbnow' variant="contained" onClick={clearStorage}> Clear Storage </Button> <br /> <br /> <Button className='bbnow' variant="contained" onClick={handleLogout}> Logout </Button> <br /> <br /> <br /> */} </div> <div className="dashboard-nav-right"> <p className="dashboard-welcome-message">Welcome !!!!! {sessionStorage.getItem('name')}</p> <br /> </div> </nav> </header> <body className="dashbody"> <img src=""/> <br/> <br/> {/* Weather Search Box - Input + Button */} <div> <h1>Weather App</h1> <br/> <input type="text" placeholder="Enter city/town..." onChange={(e) => setSearch(e.target.value)} /> <br /> <br /> <button onClick={searchPressed}>Search</button> <br/> {/* If weather is not undefined display results from API */} {typeof weather.main !== "undefined" ? ( <div > {/* Location */} <p>{weather.name}</p> {/* Temperature Celsius */} <p>{weather.main.temp}°C</p> {/* Condition (Sunny ) */} <p>({weather.weather[0].description})</p> </div> ) : ( "" )} </div> </body> </> ); }; export default Dashboard; .dashboard-header { background-color: #2c3e50; color: white; padding: 10px; width: 100%; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; } .dashboard-hamburger { cursor: pointer; padding: 5px; margin-left: 10px; } .dashboard-hamburger div { width: 30px; height: 3px; background-color: white; margin: 15px 0; transition: 0.4s; } /* .dashboard-hamburger:hover div:nth-child(1) { */ /* transform: rotate(-45deg) translate(-5px, 6px); */ /* } */ /* .dashboard-hamburger:hover div:nth-child(2) { opacity: 0; } */ /* .dashboard-hamburger:hover div:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); } */ .dashboard-nav-left { display: none; flex-direction: column; background: rgb(0,0,0); background: linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(0,236,255,0.24693627450980393) 100%); background-color:black; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); position: absolute; top: 131px; left: 0px; z-index: 1; gap:13px; } .dashboard-nav.open .dashboard-nav-left { display: flex; } .dashboard-nav-left a { color: white; padding: 10px; text-decoration: none; display: block; text-align: left; width: 150px; } .dashboard-nav-left a:hover { background-color: #45a049; } .dashboard-welcome-message { margin-right: 20px; color: orange; } .dashboard-content { padding-top: 80px; text-align: center; } .app-name { color: aliceblue; margin-bottom: 20px; } .dashbody { padding-top: 40px; text-align: center; color:rgb(233, 229, 236); color:black; } body{ background: rgb(34,193,195); background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(78,192,165,1) 20%, rgba(128,190,131,1) 43%, rgba(163,189,107,1) 64%, rgba(196,188,84,1) 83%, rgba(253,187,45,1) 100%); } div > p:nth-child(1) { font-size: 24px; font-weight: bold; } div > p:nth-child(2) { font-size: 36px; color: rgb(76, 52, 139); } div > p:nth-child(3), div > p:nth-child(4) { font-style: italic; color:rgb(94, 13, 17); font-weight: bold; } button{ background-color:rgb(139, 73, 73); } ul,li{ list-style-type: none; }
Editor is loading...
Leave a Comment