🖼 Komponentlar: media

Vizual elementlar: piktogramma, rasm va nishon.

⭐️ Icon

Piktogramma nomi bo‘yicha chiziladi (lucide to‘plami, nomi kichik harflar va chiziqcha bilan: map-pin, check-circle, shopping-bag).

• name — majburiy.
• size — xs … xl, 2xl, 3xl
• color — rang tokeni
• stroke — chiziq qalinligi, fill — ichini bo‘yash

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

Nomi noto‘g‘ri bo‘lsa, o‘sha o‘lchamdagi bo‘sh joy qoladi — vidjet siljib ketmaydi.

🌄 Image

• src — havola yoki { light, dark } juftligi.
• alt — matnli tavsif.
• width, height, size, aspectRatio, radius.
• fit — cover | contain | fill | scale-down | none.
• frame — chegara ichida ko‘rsatadi, background — orqa fon.
• onClickAction — rasmni bosiladigan qiladi.

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

🏅 Badge

Qisqa holat nishoni.

• label — matn.
• color — primary | secondary | success | danger | warning | info.
• variant — solid | soft | outline.
• size — sm | md | lg, pill — yumaloq shakl.

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

💡 Maslahat

• Rasm havolalari tashqi manzillardan keladi — ular https bo‘lishi va ochiq turishi kerak.
• Holat nomini rangga bog‘lash uchun ma’lumotda tayyor rang maydonini qaytaring: color={order.statusColor}.