TogglesPredefined

import { ToggleCard, ToggleGroup } from '@cloud-ru/ds-uikit-product-toggles-predefined';

export function Basic() {
  return (
    <ToggleGroup defaultValue='pro'>
      <ToggleCard value='start' title='Тариф Start' description='10 ГБ хранилища' />
      <ToggleCard value='pro' title='Тариф Pro' description='100 ГБ хранилища, приоритетная поддержка' />
      <ToggleCard value='enterprise' title='Тариф Enterprise' description='Безлимит и выделенный менеджер' />
    </ToggleGroup>
  );
}

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { ToggleCard, ToggleGroup } from '@cloud-ru/ds-uikit-product-toggles-predefined';

export function WithIcon() {
  return (
    <ToggleGroup defaultValue='cpu'>
      <ToggleCard value='cpu' emblem={{ icon: PlaceholderSVG }} title='CPU' description='4 vCPU, 8 ГБ RAM' />
      <ToggleCard value='gpu' emblem={{ icon: PlaceholderSVG }} title='GPU' description='1× A100, 80 ГБ' />
    </ToggleGroup>
  );
}

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { ToggleCard, ToggleGroup } from '@cloud-ru/ds-uikit-product-toggles-predefined';

export function WithPromoBadge() {
  return (
    <ToggleGroup defaultValue='pro'>
      <ToggleCard value='basic' emblem={{ icon: PlaceholderSVG }} title='Basic' description='Для старта' />
      <ToggleCard
        value='pro'
        emblem={{ icon: PlaceholderSVG }}
        title='Pro'
        description='Популярный тариф'
        promoBadge='−20%'
      />
      <ToggleCard
        value='enterprise'
        emblem={{ icon: PlaceholderSVG }}
        title='Enterprise'
        description='Для команд'
        promoBadge={{ label: 'New', appearance: 'blue' }}
      />
    </ToggleGroup>
  );
}

import { ToggleCard, ToggleGroup } from '@cloud-ru/ds-uikit-product-toggles-predefined';
import { useState } from 'react';

export function Multiple() {
  const [value, setValue] = useState<string[]>(['backup']);

  return (
    <ToggleGroup selectionMode='multiple' value={value} onChange={next => setValue(next ?? [])} gap='m'>
      <ToggleCard value='backup' title='Резервное копирование' description='Ежедневные снапшоты' />
      <ToggleCard value='monitoring' title='Мониторинг' description='Алерты и метрики 24/7' />
      <ToggleCard value='cdn' title='CDN' description='Раздача статики по миру' />
    </ToggleGroup>
  );
}

import { ToggleCard, ToggleGroup } from '@cloud-ru/ds-uikit-product-toggles-predefined';

export function Horizontal() {
  return (
    <ToggleGroup orientation='horizontal' gap='m' breakpoint={200} defaultValue='month'>
      <ToggleCard value='month' title='Помесячно' description='Гибкая оплата' />
      <ToggleCard value='year' title='Годовая' description='Скидка 20%' />
    </ToggleGroup>
  );
}

import { ToggleCard, ToggleGroup } from '@cloud-ru/ds-uikit-product-toggles-predefined';
import { useState } from 'react';

export function Controlled() {
  const [plan, setPlan] = useState<string | undefined>('pro');

  return (
    <ToggleGroup value={plan} onChange={(next: string | undefined) => setPlan(next)}>
      <ToggleCard value='start' title='Тариф Start' description={plan === 'start' ? 'Выбран' : '10 ГБ хранилища'} />
      <ToggleCard value='pro' title='Тариф Pro' description={plan === 'pro' ? 'Выбран' : '100 ГБ хранилища'} />
    </ToggleGroup>
  );
}