🖼 Компоненты: медиа

Визуальные элементы: иконка, изображение и бейдж.

⭐️ Icon

Иконка выводится по имени (набор lucide, kebab-case: map-pin, check-circle, shopping-bag).

• name — обязательное.
• size — xs … xl, 2xl, 3xl
• color — токен цвета
• stroke — толщина линии, fill — заливка

<Row align="center" gap={2}>
  <Icon name="map-pin" size="sm" color="secondary" />
  <Text value={hotel.location} size="sm" color="secondary" />
</Row>

При неизвестном имени остаётся пустое место того же размера — макет не сдвигается.

🌄 Image

• src — ссылка или пара { light, dark }.
• alt — текстовое описание.
• width, height, size, aspectRatio, radius.
• fit — cover | contain | fill | scale-down | none.
• frame — выводит в рамке, background — фон.
• onClickAction — делает изображение кликабельным.

<Image src={hotel.image} alt={hotel.name} height={160} radius="lg" fit="cover" />

🏅 Badge

Короткий статусный бейдж.

• label — текст.
• color — primary | secondary | success | danger | warning | info.
• variant — solid | soft | outline.
• size — sm | md | lg, pill — скруглённая форма.

<Badge label={order.status} color="success" variant="soft" pill />

💡 Советы

• Ссылки на изображения внешние — они должны быть https и общедоступными.
• Чтобы окрасить бейдж по статусу, верните готовый цвет в данных: color={order.statusColor}.