Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 42 43 44 45 46 47 48 49 50 51 52 53 54 | 1x 1x 1x 1x 1x 7x 7x 7x 7x 7x 7x 5x 1x 1x 7x 7x 7x 1x 1x 1x 7x 7x 7x 7x 7x 21x 21x 21x 21x 21x 21x 7x 7x 7x | import { useCallback, useEffect, useState } from 'react';
// Components
import { Button } from '../common';
// Types
import { ChartKey } from '@/types/chart';
// Utils
import { getComparisonIcon } from '@/utils/comparisonMode';
type ComparisonModeSelectorProps = {
selectedItem: ChartKey;
onChange?: (key: ChartKey) => void;
};
export const ComparisonModeSelector = ({
selectedItem = ChartKey.SLOT,
onChange,
}: ComparisonModeSelectorProps) => {
// Default selected mode is "slot" (ChartKey.SLOT)
const [selected, setSelected] = useState<ChartKey>(selectedItem);
// List of all modes
const modes: ChartKey[] = [ChartKey.SLOT, ChartKey.LIKE, ChartKey.DISLIKE];
useEffect(() => {
if (selectedItem && selectedItem !== selected) {
setSelected(selectedItem);
}
}, [selectedItem]);
// Generate click handlers dynamically
const handleChangeKey = useCallback(
(key: ChartKey) => () => {
setSelected(key);
onChange?.(key);
},
[onChange],
);
return (
<div className="flex gap-2.75">
{modes.map((mode) => (
<Button
className="w-[22px]"
key={mode}
onClick={handleChangeKey(mode)}
icon={getComparisonIcon(selected, mode)}
/>
))}
</div>
);
};
|