import { ServiceCards } from '@megafon/ui-shared';Компонент по дизайну рассчитан только на 5 карточек
<ServiceCards items={[ { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageBig.src }, { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageSmall.src }, { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageSmall.src }, { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageSmall.src }, { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageSmall.src } ]} />
<ServiceCards background="gray" items={[ { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageBig.src }, { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageSmall.src }, { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageSmall.src }, { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageSmall.src }, { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageSmall.src } ]} />
<ServiceCards background="white" items={[ { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageBig.src }, { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageSmall.src }, { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageSmall.src }, { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageSmall.src }, { "title": "Видеонаблюдение", "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса", "value": "от 399 ₽/мес", "href": "/corporate", "target": "_blank", "noFollow": true, "imageSrc": imageSmall.src } ]} />
| Prop name | Type | Default | Description |
|---|---|---|---|
| background | BackgroundType | Цвет фона плиток | |
| items* | [ServiceCardDataType, ServiceCardDataType, ServiceCardDataType, ServiceCardDataType, ServiceCardDataType] | Список плиток | |
| className | string | Дополнительный класс для компонента | |
| classes | { root?: string; card?: string; cardTitle?: string; } | Дополнительные классы для внутренних элементов | |
| dataAttrs | { root?: Record<string, string>; item?: Record<string, string>; card?: Record<string, string>; cardTitle?: Record<string, string>; } | Дополнительные data атрибуты к внутренним элементам | |
| rootRef | Ref<HTMLDivElement> | Ссылка на корневой элемент |
type TargetType = '_self' | '_blank' | '_parent' | '_top';export type ServiceCardDataType = {/** Заголовок */title: string | React.ReactNode | ReactNode[];/** Подзаголовок */subtitle?: string | React.ReactNode | ReactNode[];/** Значение */value: string;/** Изображение */imageSrc: string;/** Изображение 2x */imageSrc2x?: string;/** Значение тега alt для изображения */imageAlt?: string;/** Ссылка */href: string;/** Атрибут ссылки target */target?: TargetType;/** Атрибут ссылки rel */rel?: string;/** Обработчик клика по кнопке */onClick?: (e: React.SyntheticEvent<EventTarget>) => void;};type BackgroundType = 'white' | 'gray' | 'shadow';