dify/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx

import { SegmentedControl, SegmentedControlItem } from '@langgenius/dify-ui/segmented-control'
import { useTranslation } from 'react-i18next'
import { AUTO_UPDATE_STRATEGY } from './types'

const i18nPrefix = 'autoUpdate.strategy'

type Props = Readonly<{
  value: AUTO_UPDATE_STRATEGY
  onChange: (value: AUTO_UPDATE_STRATEGY) => void
}>
const StrategyPicker = ({
  value,
  onChange,
}: Props) => {
  const { t } = useTranslation()
  const options = [
    {
      value: AUTO_UPDATE_STRATEGY.disabled,
      label: t(`${i18nPrefix}.disabled.name`, { ns: 'plugin' }),
    },
    {
      value: AUTO_UPDATE_STRATEGY.fixOnly,
      label: t(`${i18nPrefix}.fixOnly.name`, { ns: 'plugin' }),
    },
    {
      value: AUTO_UPDATE_STRATEGY.latest,
      label: t(`${i18nPrefix}.latest.name`, { ns: 'plugin' }),
    },
  ]

  return (
    <SegmentedControl<AUTO_UPDATE_STRATEGY>
      aria-label={t('autoUpdate.automaticUpdates', { ns: 'plugin' })}
      className="w-[326px]"
      value={[value]}
      onValueChange={(nextValue) => {
        const selectedValue = nextValue[0]
        if (selectedValue)
          onChange(selectedValue)
      }}
    >
      {options.map(option => (
        <SegmentedControlItem<AUTO_UPDATE_STRATEGY>
          key={option.value}
          value={option.value}
          className="flex-1 hover:bg-state-base-hover-alt data-pressed:text-text-accent-light-mode-only data-pressed:hover:bg-components-segmented-control-item-active-bg"
        >
          <span className="p-0.5 whitespace-nowrap">{option.label}</span>
        </SegmentedControlItem>
      ))}
    </SegmentedControl>
  )
}

export default StrategyPicker