All files / src/components/ui/selectableButton SelectableButton.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import clsx from "clsx";
 
/**
 * SelectableButton is a reusable button that highlights itself when selected.
 *
 * @component
 * @module components/ui/selectableButton/SelectableButton
 *
 * @param {Object} props
 * @param {string | number} props.label - Text to display inside the button
 * @param {boolean} props.isSelected - Whether the button is currently selected
 * @param {Function} props.onClick - Callback when the button is clicked
 * @param {string} [props.className=""] - Additional CSS classes
 * @param {boolean} [props.disabled=false] - Disable button interaction
 * @returns {JSX.Element}
 */
export function SelectableButton({
                                     label,
                                     isSelected,
                                     onClick,
                                     className = "",
                                     disabled = false
}) {
    return (
        <button
            onClick={onClick}
            disabled={disabled}
            className={clsx(
                "px-4 py-2 rounded-lg border text-sm whitespace-nowrap transition-all",
                isSelected
                    ? "bg-blue-600 text-white shadow-md hover:shadow-lg dark:bg-blue-500"
                    : "bg-gray-200 hover:bg-gray-300 shadow-sm dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200",
                className
            )}
            aria-pressed={isSelected}
        >
            {label}
        </button>
    );
}