91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
ShieldAlert,
|
|
Zap,
|
|
Siren,
|
|
BatteryWarning,
|
|
MoveVertical,
|
|
} from 'lucide-react';
|
|
|
|
export type RobotFeature =
|
|
| 'emergencyStop'
|
|
| 'response'
|
|
| 'obstacleAvoidance'
|
|
| 'lowBatteryReturn'
|
|
| 'tiltProtection';
|
|
|
|
export interface FeatureConfig {
|
|
key: RobotFeature;
|
|
icon: React.ReactNode;
|
|
activeColor: string;
|
|
inactiveColor: string;
|
|
}
|
|
|
|
const FEATURES: FeatureConfig[] = [
|
|
{ key: 'emergencyStop', icon: <ShieldAlert className="w-5 h-5" />, activeColor: '#ef4444', inactiveColor: '#94a3b8' },
|
|
{ key: 'obstacleAvoidance', icon: <Siren className="w-5 h-5" />, activeColor: '#3b82f6', inactiveColor: '#94a3b8' },
|
|
{ key: 'lowBatteryReturn', icon: <BatteryWarning className="w-5 h-5" />, activeColor: '#f59e0b', inactiveColor: '#94a3b8' },
|
|
{ key: 'tiltProtection', icon: <MoveVertical className="w-5 h-5" />, activeColor: '#10b981', inactiveColor: '#94a3b8' },
|
|
];
|
|
|
|
interface RobotFeatureButtonsProps {
|
|
activeFeatures?: RobotFeature[];
|
|
onToggle?: (feature: RobotFeature, enabled: boolean) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const RobotFeatureButtons: React.FC<RobotFeatureButtonsProps> = ({
|
|
activeFeatures = [],
|
|
onToggle,
|
|
className = '',
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const [active, setActive] = useState<Set<RobotFeature>>(new Set(activeFeatures));
|
|
|
|
const handleClick = (feature: RobotFeature) => {
|
|
const next = !active.has(feature);
|
|
const nextSet = new Set(active);
|
|
if (next) nextSet.add(feature);
|
|
else nextSet.delete(feature);
|
|
setActive(nextSet);
|
|
onToggle?.(feature, next);
|
|
};
|
|
|
|
return (
|
|
<div className={`flex flex-wrap gap-2 ${className}`}>
|
|
{FEATURES.map((f) => {
|
|
const isActive = active.has(f.key);
|
|
return (
|
|
<button
|
|
key={f.key}
|
|
onClick={() => handleClick(f.key)}
|
|
className={`flex items-center gap-1 px-1 py-1 rounded-lg border transition-all duration-200 select-none
|
|
${isActive
|
|
? 'border-current shadow-lg'
|
|
: 'border-slate-700 hover:border-slate-500'
|
|
}`}
|
|
style={{
|
|
color: isActive ? f.activeColor : f.inactiveColor,
|
|
backgroundColor: isActive ? `${f.activeColor}1a` : 'transparent',
|
|
boxShadow: isActive ? `0 0 12px ${f.activeColor}33` : 'none',
|
|
}}
|
|
title={t(`devices.features.${f.key}`)}
|
|
>
|
|
<span className="flex items-center justify-center">{f.icon}</span>
|
|
<span className="text-xs font-medium whitespace-nowrap">
|
|
{t(`devices.features.${f.key}`)}
|
|
</span>
|
|
<span
|
|
className="ml-1 w-2 h-2 rounded-full transition-all"
|
|
style={{ backgroundColor: isActive ? f.activeColor : '#475569' }}
|
|
/>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RobotFeatureButtons;
|