Spaces:
Sleeping
Sleeping
| import React, { useState } from 'react'; | |
| import './ChartHelpButton.css'; | |
| interface Props { | |
| title: string; | |
| description: React.ReactNode; | |
| inline?: boolean; | |
| } | |
| export default function ChartHelpButton({ title, description, inline = false }: Props) { | |
| const [isOpen, setIsOpen] = useState(false); | |
| return ( | |
| <div className={`chart-help-container ${inline ? 'inline' : 'absolute'}`}> | |
| <button | |
| className={`btn btn-sm chart-help-btn ${isOpen ? 'active' : ''}`} | |
| onClick={() => setIsOpen(!isOpen)} | |
| title="Toggle Explanation" | |
| > | |
| 💡 | |
| </button> | |
| {isOpen && ( | |
| <div className="chart-help-popup"> | |
| <div className="chart-help-header"> | |
| <h4>{title}</h4> | |
| <button className="chart-help-close" onClick={() => setIsOpen(false)}>×</button> | |
| </div> | |
| <div className="chart-help-body"> | |
| {description} | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |