update
This commit is contained in:
Hamed
+96
-82
@@ -3,11 +3,12 @@
|
||||
// نقشه نشان (Neshan) — از Static Map API استفاده میکند. تا وقتی کلید API خالی باشد،
|
||||
// بهجای نقشه یک پیام راهنما نشان داده میشود (نه تصویر خراب).
|
||||
|
||||
import { useState } from 'react';
|
||||
import { EnvironmentOutlined } from '@ant-design/icons';
|
||||
import { useLanguage } from '@/app/context/LanguageContext';
|
||||
import { useTheme } from '@/app/context/ThemeContext';
|
||||
import { mapLocations } from '@/data/content';
|
||||
import {useState} from 'react';
|
||||
import {EnvironmentOutlined} from '@ant-design/icons';
|
||||
import {useLanguage} from '@/app/context/LanguageContext';
|
||||
import {useTheme} from '@/app/context/ThemeContext';
|
||||
import {mapLocations} from '@/data/content';
|
||||
import Image from "next/image";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Neshan (نشان) map integration.
|
||||
@@ -23,94 +24,107 @@ const NESHAN_API_KEY = process.env.NEXT_PUBLIC_NESHAN_API_KEY || '';
|
||||
// Verify query param names/values against the current Neshan docs
|
||||
// (https://platform.neshan.org/api/static-map/) if this ever needs updating —
|
||||
// `type` accepts their day/night map styles, e.g. "standard-day" / "standard-night".
|
||||
function staticMapUrl({ lat, lng }, mapStyle) {
|
||||
const params = new URLSearchParams({
|
||||
key: NESHAN_API_KEY,
|
||||
type: mapStyle,
|
||||
center: `${lat},${lng}`,
|
||||
zoom: '15',
|
||||
size: '600x400',
|
||||
marker: `${lat},${lng}`,
|
||||
});
|
||||
return `https://api.neshan.org/v5/static?${params.toString()}`;
|
||||
function staticMapUrl({lat, lng}, mapStyle) {
|
||||
const params = new URLSearchParams({
|
||||
key: NESHAN_API_KEY,
|
||||
type: mapStyle,
|
||||
center: `${lat},${lng}`,
|
||||
zoom: '15',
|
||||
size: '600x400',
|
||||
marker: `${lat},${lng}`,
|
||||
});
|
||||
return `https://api.neshan.org/v5/static?${params.toString()}`;
|
||||
}
|
||||
|
||||
function neshanViewUrl({ lat, lng }) {
|
||||
return `https://neshan.org/maps/@${lat},${lng},15z`;
|
||||
function neshanViewUrl({lat, lng}) {
|
||||
return `https://neshan.org/maps/@${lat},${lng},15z`;
|
||||
}
|
||||
|
||||
function MapThumb({ coords, mapStyle, alt }) {
|
||||
const [errored, setErrored] = useState(false);
|
||||
const { t } = useLanguage();
|
||||
function MapThumb({coords, mapStyle, alt}) {
|
||||
const [errored, setErrored] = useState(false);
|
||||
const {t} = useLanguage();
|
||||
|
||||
if (!NESHAN_API_KEY || errored) {
|
||||
return (
|
||||
<div
|
||||
className="w-full h-full min-h-[280px] flex flex-col items-center justify-center gap-3 bg-surface text-secondary text-sm text-center p-6">
|
||||
<EnvironmentOutlined className="text-3xl text-brand-400"/>
|
||||
<p>{t.map.configNotice}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!NESHAN_API_KEY || errored) {
|
||||
return (
|
||||
<div className="w-full h-full min-h-[280px] flex flex-col items-center justify-center gap-3 bg-surface text-secondary text-sm text-center p-6">
|
||||
<EnvironmentOutlined className="text-3xl text-brand-400" />
|
||||
<p>{t.map.configNotice}</p>
|
||||
</div>
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={staticMapUrl(coords, mapStyle)}
|
||||
alt={alt}
|
||||
onError={() => setErrored(true)}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={staticMapUrl(coords, mapStyle)}
|
||||
alt={alt}
|
||||
onError={() => setErrored(true)}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MapSection() {
|
||||
const { t } = useLanguage();
|
||||
const { theme } = useTheme();
|
||||
const mapStyle = theme === 'dark' ? 'standard-night' : 'standard-day';
|
||||
const {t} = useLanguage();
|
||||
const {theme} = useTheme();
|
||||
const mapStyle = theme === 'dark' ? 'standard-night' : 'standard-day';
|
||||
|
||||
const pins = [
|
||||
{ key: 'factory', label: t.map.factoryLabel, coords: mapLocations.factory, address: t.contactInfo.factoryAddress },
|
||||
{ key: 'sales', label: t.map.salesLabel, coords: mapLocations.salesOffice, address: t.contactInfo.salesOfficeAddress },
|
||||
];
|
||||
const pins = [
|
||||
{
|
||||
key: 'factory',
|
||||
label: t.map.factoryLabel,
|
||||
coords: mapLocations.factory,
|
||||
address: t.contactInfo.factoryAddress
|
||||
},
|
||||
{
|
||||
key: 'sales',
|
||||
label: t.map.salesLabel,
|
||||
coords: mapLocations.salesOffice,
|
||||
address: t.contactInfo.salesOfficeAddress
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="map" className="relative px-6 md:px-16 py-20 md:py-28 bg-page border-t border-subtle">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<span className="text-brand-400 text-sm font-semibold tracking-wide">{t.map.eyebrow}</span>
|
||||
<h2 className="text-2xl md:text-4xl font-extrabold brand-gradient-text mt-3">{t.map.title}</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-[1.3fr,1fr] gap-6">
|
||||
<div className="rounded-2xl overflow-hidden border border-subtle h-[360px] lg:h-auto min-h-[360px]">
|
||||
<MapThumb coords={pins[0].coords} mapStyle={mapStyle} alt={pins[0].label} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{pins.map((pin) => (
|
||||
<div key={pin.key} className="bg-surface border border-subtle rounded-2xl p-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 shrink-0 rounded-lg bg-brand/15 border border-subtle flex items-center justify-center text-brand-400">
|
||||
<EnvironmentOutlined />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-primary font-bold text-sm mb-1">{pin.label}</h3>
|
||||
<p className="text-secondary text-sm leading-7 mb-2">{pin.address}</p>
|
||||
<a
|
||||
href={neshanViewUrl(pin.coords)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-brand-400 hover:text-brand-300 text-xs font-semibold transition-colors"
|
||||
>
|
||||
{t.map.openInMaps} ↗
|
||||
</a>
|
||||
</div>
|
||||
return (
|
||||
<section id="map" className="relative px-6 md:px-16 py-20 md:py-28 bg-page border-t border-subtle">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<span className="text-brand-400 text-sm font-semibold tracking-wide">{t.map.eyebrow}</span>
|
||||
<h2 className="text-2xl md:text-4xl font-extrabold brand-gradient-text mt-3">{t.map.title}</h2>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
<div className="grid lg:grid-cols-[1.3fr,1fr] gap-6">
|
||||
<div className="rounded-2xl overflow-hidden border border-subtle h-[360px] lg:h-auto min-h-[360px]">
|
||||
{/*<MapThumb coords={pins[0].coords} mapStyle={mapStyle} alt={pins[0].label} />*/}
|
||||
<Image src="/images/map.png" alt="روبات مارکت" width={600} height={600} className={"object-contain"} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{pins.map((pin) => (
|
||||
<div key={pin.key} className="bg-surface border border-subtle rounded-2xl p-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className="w-10 h-10 shrink-0 rounded-lg bg-brand/15 border border-subtle flex items-center justify-center text-brand-400">
|
||||
<EnvironmentOutlined/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-primary font-bold text-sm mb-1">{pin.label}</h3>
|
||||
<p className="text-secondary text-sm leading-7 mb-2">{pin.address}</p>
|
||||
<a
|
||||
href={neshanViewUrl(pin.coords)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-brand-400 hover:text-brand-300 text-xs font-semibold transition-colors"
|
||||
>
|
||||
{t.map.openInMaps} ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user