Looking to update the styling of the tab text in the navbar, as well as implement functionality where clicking on a tab switches between pages and marks the selected tab as active. Below is the code I've written:
Header.js
import React from "react";
import "./Header.css";
import Tab from "./Tab";
const tabs = ["About", "Portfolio", "Blogs", "Contact"];
const Header = () => {
const
return (
<div className="header">
{tabs.map((elem, indx) => {
return <Tab key={indx} text={elem} />;
})}
</div>
);
};
export default Header;
Header.css
.header {
width: 100%;
background-color: transparent;
z-index: 1;
color: white;
padding: 1em;
box-shadow: 2px 2px 2px 2px rgb(66, 65, 65);
display: flex;
gap: 2em;
justify-content: flex-end;
}
Tab.js
import React, { useState } from "react";
import "./Tab.css";
const Tab = ({ text }) => {
const [active, setActive] = useState(false);
return (
<div className="tab">
<div
className={`text ${active && "active"}`}
onClick={() => setActive(true)}>
{text}
</div>
</div>
);
};
export default Tab;
Tab.css
.tab {
padding: 0.3;
}
.text {
font-size: 1.1rem;
}
.active {
color: chocolate;
border-bottom: 1px solid chocolate;
}
.text:hover {
color: chocolate;
cursor: pointer;
}
Currently, when clicking on a tab it becomes active, but selecting another tab also activates both. I'm seeking guidance on modifying the code to ensure only one tab is active at a time. How can this be accomplished?