32 lines
829 B
TypeScript
32 lines
829 B
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
interface ToggleHeaderProps {
|
||
|
|
options: string[]; // Array of strings representing the options
|
||
|
|
activeOption: string; // The currently active option
|
||
|
|
handleClick: (option: string) => void; // Function to handle click events
|
||
|
|
}
|
||
|
|
|
||
|
|
const ToggleHeader: React.FC<ToggleHeaderProps> = ({
|
||
|
|
options,
|
||
|
|
activeOption,
|
||
|
|
handleClick,
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<div className="toggle-header-container">
|
||
|
|
{options.map((option, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className={`toggle-header-item ${
|
||
|
|
option === activeOption ? "active" : ""
|
||
|
|
}`}
|
||
|
|
onClick={() => handleClick(option)} // Call handleClick when an option is clicked
|
||
|
|
>
|
||
|
|
{option}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ToggleHeader;
|