import React, { useState } from "react"; import "./Header.css"; //Components; import Logo from "../../assets/images/logo.png"; import { Link, useLocation } from "react-router-dom"; export default function Header() { const location = useLocation(); const [links, setLinks] = useState([ { _id: Math.random().toString(), title: "DashBoard", link: "/", }, { _id: Math.random().toString(), title: "About", link: "/about", }, { _id: Math.random().toString(), title: "Contact", link: "/contact", }, ]); return ( <div className="header"> <Link to="/"> <div className="logo"> <img src={Logo} alt="err" /> <p>STONKS</p> </div> </Link> <div className="header-options"> {links?.map(({ _id, title, link }) => ( <Link to={link}> <p className={`${location.pathname === link && "active"}`}> {title} </p> </Link> ))} </div> </div> ); }