53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import type { FeatureMeta } from '../../types';
|
|
import { EyeIcon, InfoIcon, PlusIcon, CloseIcon } from './icons';
|
|
import { IconButton } from './IconButton';
|
|
|
|
interface FeatureActionsProps {
|
|
feature: FeatureMeta;
|
|
isPinned: boolean;
|
|
onTogglePin: (name: string) => void;
|
|
onShowInfo?: (feature: FeatureMeta) => void;
|
|
onRemove?: (name: string) => void;
|
|
onAdd?: (name: string) => void;
|
|
}
|
|
|
|
export function FeatureActions({
|
|
feature,
|
|
isPinned,
|
|
onTogglePin,
|
|
onShowInfo,
|
|
onRemove,
|
|
onAdd,
|
|
}: FeatureActionsProps) {
|
|
return (
|
|
<div className="flex items-center gap-0.5 shrink-0">
|
|
{feature.detail && onShowInfo && (
|
|
<IconButton onClick={() => onShowInfo(feature)} title="Feature info" size="md">
|
|
<InfoIcon className="w-5 h-5 md:w-3.5 md:h-3.5" />
|
|
</IconButton>
|
|
)}
|
|
<IconButton
|
|
onClick={() => onTogglePin(feature.name)}
|
|
title={isPinned ? 'Unpin colour view' : 'Colour map by this feature'}
|
|
active={isPinned}
|
|
size="md"
|
|
>
|
|
<EyeIcon filled={isPinned} className="w-5 h-5 md:w-3.5 md:h-3.5" />
|
|
</IconButton>
|
|
{onAdd && (
|
|
<button
|
|
onClick={() => onAdd(feature.name)}
|
|
title="Add filter"
|
|
className="p-1 rounded-md text-teal-600 dark:text-teal-400 bg-teal-50 dark:bg-teal-900/30 hover:bg-teal-100 dark:hover:bg-teal-800/40"
|
|
>
|
|
<PlusIcon className="w-5 h-5 md:w-5 md:h-5" strokeWidth={2.5} />
|
|
</button>
|
|
)}
|
|
{onRemove && (
|
|
<IconButton onClick={() => onRemove(feature.name)} title="Remove filter">
|
|
<CloseIcon className="w-3.5 h-3.5" />
|
|
</IconButton>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|