0eec9f729b
Commit completed Torbat Pages admin frontend module, BFF proxy, routes, and validation artifacts for official platform deploy. Co-authored-by: Cursor <cursoragent@cursor.com>
60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
"use client";
|
||
|
||
export type ExperienceMapMarker = {
|
||
id: string;
|
||
label: string;
|
||
lat: number;
|
||
lng: number;
|
||
};
|
||
|
||
/** Lightweight map shell (no third-party map SDK). Markers positioned relatively for preview. */
|
||
export function ExperienceMap({
|
||
markers = [],
|
||
center = { lat: 35.25, lng: 59.22 },
|
||
title = "نقشه",
|
||
}: {
|
||
markers?: ExperienceMapMarker[];
|
||
center?: { lat: number; lng: number };
|
||
title?: string;
|
||
}) {
|
||
const span = 0.08;
|
||
const toPct = (lat: number, lng: number) => {
|
||
const x = ((lng - (center.lng - span)) / (span * 2)) * 100;
|
||
const y = ((center.lat + span - lat) / (span * 2)) * 100;
|
||
return {
|
||
left: `${Math.min(95, Math.max(5, x))}%`,
|
||
top: `${Math.min(95, Math.max(5, y))}%`,
|
||
};
|
||
};
|
||
|
||
return (
|
||
<div
|
||
role="region"
|
||
aria-label={title}
|
||
className="relative h-64 overflow-hidden rounded-xl border border-[var(--border)] bg-[linear-gradient(135deg,var(--experience-accent-soft),var(--surface-muted))]"
|
||
>
|
||
<div className="pointer-events-none absolute inset-0 opacity-30 [background-image:linear-gradient(var(--border)_1px,transparent_1px),linear-gradient(90deg,var(--border)_1px,transparent_1px)] [background-size:32px_32px]" />
|
||
{markers.map((m) => {
|
||
const pos = toPct(m.lat, m.lng);
|
||
return (
|
||
<button
|
||
key={m.id}
|
||
type="button"
|
||
title={m.label}
|
||
aria-label={m.label}
|
||
className="absolute z-10 -translate-x-1/2 -translate-y-full rounded-full bg-[var(--experience-accent)] px-2 py-1 text-[10px] font-medium text-white shadow transition-transform hover:scale-105"
|
||
style={pos}
|
||
>
|
||
{m.label}
|
||
</button>
|
||
);
|
||
})}
|
||
{markers.length === 0 ? (
|
||
<p className="absolute inset-0 flex items-center justify-center text-sm text-[var(--muted)]">
|
||
نشانگری ثبت نشده
|
||
</p>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|