Title
unknown
plain_text
10 months ago
1.7 kB
4
Indexable
import React, { useState } from 'react'; import './Header.css'; import logo from '../Assets/logo.png'; import { FaUser, FaDotCircle } from 'react-icons/fa'; function Header({ setMobile, mobile, login }) { const [isDropdownOpen, setIsDropdownOpen] = useState(false); const handleVerify = () => { setMobile(!mobile); }; const toggleDropdown = () => { setIsDropdownOpen(!isDropdownOpen); }; return ( <header className="header"> <div className="logo"> <img src={logo} alt="Logo" /> </div> <div className="search-bar"> <input type="text" placeholder="Search for Hospitals, Labs" /> </div> <div className="location-selector"> <span className="location-icon"><FaDotCircle /></span> <select> <option>Select Location</option> <option>Hyderabad</option> <option>Banjara Hills</option> <option>Jubilee Hills</option> <option>Gachibowli</option> <option>Ameerpet</option> {/* Add more specific locations in Hyderabad */} </select> </div> <div className="user-icon" onClick={toggleDropdown}> <FaUser /> {isDropdownOpen && ( <div className="dropdown-content"> <a href="#">Profile</a> <a href="#">Bookings</a> <a href="#">Favorites</a> <a href="#">Medical Records</a> <a href="#">Help</a> <a href="#">Sign Out</a> </div> )} </div> {!login && ( <button className="login-button" onClick={handleVerify}>Login / Signup</button> )} </header> ); } export default Header;
Editor is loading...
Leave a Comment