37 lines
947 B
React
37 lines
947 B
React
import "./index.css";
|
|
import React, { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
/**
|
|
* Renders a menu button with an icon and title.
|
|
*
|
|
* @component
|
|
* @param {React.ElementType} icon - The icon component to be rendered.
|
|
* @param {string} title - The title of the menu button.
|
|
* @returns {React.ReactElement} The rendered menu button component.
|
|
*/
|
|
|
|
const DashboardMenuButton = (icon, title, to) => {
|
|
const [isActive, setIsActive] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
const handleClick = () => {
|
|
setIsActive(!isActive);
|
|
navigate(to);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`icon-container ${isActive ? "active" : ""}`}
|
|
onClick={handleClick}
|
|
>
|
|
<img className="icon" src={icon} alt="Monitors" />
|
|
<div className="text-container">
|
|
<span className="dashboard-menu-text">{title}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DashboardMenuButton;
|