شکل تعاملی
hotspot-figureکامپوننتتصویر یا دیاگرام با نقطههای شمارهدار که با کلیک نام و توضیح هر بخش را نشان میدن و راهنمای زیر شکل بخشهای دیدهشده را تیک میزنه.
۰ از ۶ بخش را دیدهاید. روی شمارهها بزنید.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add hotspot-figureنصب دستی
محتوای تب «کد» را در
components/ui/hotspot-figure.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { HotspotFigure } from "@/components/ui/hotspot-figure"23<HotspotFigure4 ratio="4 / 3"5 caption="شکل ۴-۱: ساختار سلول گیاهی"6 hotspots={[7 { id: "wall", x: 12, y: 50, title: "دیوارهی سلولی", desc: "لایهی سلولزی محکم بیرون غشا." },8 { id: "nucleus", x: 58, y: 38, title: "هسته", desc: "DNA سلول و مرکز کنترل." },9 { id: "chloroplast", x: 36, y: 70, title: "کلروپلاست", desc: "محل فتوسنتز." },10 ]}11 onExplore={(seen) => seen.length === 3 && markDone()}12>13 <img src="/figures/plant-cell.webp" alt="سلول گیاهی" />14</HotspotFigure>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| hotspots | { id; x; y; title; desc? }[] | - | x و y درصد از لبهی چپ و بالای تصویرند. |
| children | ReactNode | - | تصویر، SVG یا هر المانی که کادر را پر کنه. |
| ratio | string | "16 / 10" | نسبت ابعاد؛ قبل از بارگذاری جا رزرو میشه. |
| showLegend | boolean | true | فهرست شمارهدار زیر شکل با تیک بخشهای دیدهشده. |
| onExplore | (visited: string[]) => void | - | هر بار که بخش تازهای دیده میشه. |
| caption | ReactNode | - | شرح شکل. |
نکتههای راستچین
- مختصات نقطهها فیزیکی (left/top) است چون خود تصویر در RTL آینه نمیشه؛ کارت توضیح و راهنما راستچیناند.
- نقطههای دیدهنشده پالس میزنن (با prefers-reduced-motion خاموش میشه)؛ Escape کارت را میبنده.
- هر نقطه ناحیهی لمس ۴۴ پیکسلی داره، هرچند دایرهی دیدهشده کوچکتره.