Function SegmentedControl

frontend/src/components/ConfigPanel.jsx:67–93

({ label, options, value, onChange })

  // Segmented control component
  const SegmentedControl = ({ label, options, value, onChange }) => {
    return (
      <div className="flex flex-col gap-2">
        <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
          {label}
        </label>
        <div className="inline-flex items-center bg-gray-50 dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 rounded-xl p-1">
          {options.map((option) => (
            <button
              key={option.value}
              onClick={() => onChange(option.value)}
              className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-all ${
                value === option.value
                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-md'
                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
              }`}
            >
              {value === option.value && (
                <Check className="w-4 h-4 inline-block mr-1" />
              )}
              {option.label}
            </button>
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className="w-full">