import { PromoCards, PromoCard } from '@megafon/ui-shared';
Минимальное количество 2 карточки
<PromoCards items={[ { title: 'Абонемент на связь', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, }, { title: 'Абонемент на связь', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, } ]} />
<PromoCards> <PromoCard title="Абонемент на связь" link={{ title: 'Подробнее', href: '/' }} image={{ src: imageSrc }} /> <PromoCard title="Абонемент на связь" link={{ title: 'Подробнее', href: '/' }} image={{ src: imageSrc }} /> </PromoCards>
<PromoCards items={[ { title: 'Абонемент на связь', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, }, { title: 'Абонемент на связь', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, }, { title: 'Абонемент на связь', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, }, { title: 'Абонемент на связь', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, } ]} />
<PromoCards items={[ { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, }, { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, } ]} />
<PromoCards items={[ { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, badge: <PromoBadge color="brand-purple">Безлимитные звонки</PromoBadge> }, { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, badge: <PromoBadge color="brand-purple">Безлимитные звонки</PromoBadge> } ]} />
<PromoCards> <PromoCard title="Абонемент на связь" subtitle='Скидка на абонентскую плату при оплате на несколько месяцев вперёд' link={{ title: 'Подробнее', href: '/' }} image={{ src: imageSrc }} badge={<PromoBadge color="brand-purple">Безлимитные звонки</PromoBadge>} /> <PromoCard title="Абонемент на связь" subtitle='Скидка на абонентскую плату' link={{ title: 'Подробнее', href: '/' }} image={{ src: imageSrc }} badge={<PromoBadge color="brand-purple">Безлимитные звонки</PromoBadge>} /> </PromoCards>
<PromoCards items={[ { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, promoBadge: { text: 'Безлимитные звонки', color: 'night' }, }, { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, promoBadge: { text: 'Безлимитные звонки', color: 'gradient-purple' }, } ]} />
<PromoCards items={[ { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, priceBadge: { text: 'Безлимитные звонки' }, }, { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, priceBadge: { text: 'Безлимитные звонки', iconType: 'check', theme: 'orange' }, } ]} />
Логотип и бейдж не могут быть включены одновременно
<PromoCards items={[ { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, logo: { src: logoSrc, alt: 'Logo Alt' } }, { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, logo: { src: logoSrc, alt: 'Logo Alt' } } ]} />
<PromoCards> <PromoCard title="Абонемент на связь" subtitle='Скидка на абонентскую плату при оплате на несколько месяцев вперёд' link={{ title: 'Подробнее', href: '/' }} image={{ src: imageSrc }} logo={{ src: logoSrc, alt: 'Logo Alt' }} /> <PromoCard title="Абонемент на связь" subtitle='Скидка на абонентскую плату' link={{ title: 'Подробнее', href: '/' }} image={{ src: imageSrc }} logo={{ src: logoSrc, alt: 'Logo Alt' }} /> </PromoCards>
<PromoCards background="shadow" items={[ { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, logo: { src: logoSrc, alt: 'Logo Alt' } }, { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, logo: { src: logoSrc, alt: 'Logo Alt' } } ]} />
<div style={{ backgroundColor: 'var(--spbSky0)', padding: '40px 80px' }}> <PromoCards background="white" carouselGradientColor="spbSky0" items={[ { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, logo: { src: logoSrc, alt: 'Logo Alt' } }, { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, logo: { src: logoSrc, alt: 'Logo Alt' } }, { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, logo: { src: logoSrc, alt: 'Logo Alt' } }, { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, logo: { src: logoSrc, alt: 'Logo Alt' } } ]} /> </div>
<PromoCards background="gray" items={[ { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, logo: { src: logoSrc, alt: 'Logo Alt' } }, { title: 'Абонемент на связь', subtitle: 'Скидка на абонентскую плату', link: { title: 'Подробнее', href: '/' }, image: { src: imageSrc, alt: 'Alt' }, logo: { src: logoSrc, alt: 'Logo Alt' } } ]} />
Prop name | Type | Default | Description |
---|---|---|---|
items | IPromoCardData[] | Список карточек. Минимальное количество 2 карточки | |
carouselNavTheme | NavThemeType | Тема навигации для карусели | |
carouselGradientColor | GradientThemeType | Цвет градиента для карусели | |
className | string | Дополнительный css класс для корневого элемента | |
classes | { root?: string; card?: string; } | Дополнительные css классы для корневого и внутренних элементов | |
dataAttrs | { root?: Record<string, string>; card?: Record<string, string>; } | Дополнительные data атрибуты к внутренним элементам | |
rootRef | Ref<HTMLDivElement> | Ссылка на элемент | |
children | ReactNode | Дочерние элементы. Минимальное количество 2 элемента | |
background | "gray" | "white" | "shadow" | Фон карточки |
Prop name | Type | Default | Description |
---|---|---|---|
className | string | Дополнительный css класс для корневого элемента | |
classes | { root?: string; } | Дополнительные css классы для корневого элемента | |
dataAttrs | { root?: Record<string, string>; image?: Record<string, string>; badge?: Record<string, string>; logo?: Record<string, string>; subtitle?: Record<string, string>; } | Дополнительные data атрибуты к корневому и внутренним элементам | |
title* | string | Заголовок карточки | |
subtitle | string | Подзаголовок карточки | |
link* | LinkType | Параметры для ссылки в карточке | |
image* | ImageType | Параметры для изображения в карточке | |
logo | LogoType | Параметры для логотипа в карточке | |
badge | ReactElement<any, string | JSXElementConstructor<any>> | Бейдж в карточке | |
promoBadge | PromoBadgeType | null | Параметры для отображения компонента PromoBadge в карточке |
priceBadge | PriceBadgeType | null | Параметры для отображения компонента PriceBadge в карточке |
onClick | (e: SyntheticEvent<EventTarget, Event>) => void | Обработчик клика по карточке | |
background | "gray" | "white" | "shadow" | shadow | Фон карточки |
type NavThemeType = 'light' |'green';type GradientThemeType = 'default' | 'green' | 'black' | 'spbSky0' | 'spbSky1' | 'spbSky2';
type ImageType = {src: string;src2x?: string;alt?: string;};type LogoType = {src?: string;alt?: string;};type LinkType = {title: string;href: string;target?: '_self' | '_blank';rel?: string;};type PromoBadgeType = {text: string;color: IPromoBadgeProps['color'];};type PriceBadgeType = {text: string;iconType?: IPriceBadgeProps['iconType'];theme?: IPriceBadgeProps['theme'];};interface IPromoCardData {title: string;subtitle?: string;link: LinkType;image: ImageType;logo?: LogoType;badge?: React.ReactNode | null;promoBadge?: PromoBadgeType | null;priceBadge?: PriceBadgeType | null;onClick?: (e: React.SyntheticEvent<EventTarget>) => void;}