127 lines
4.6 KiB
TypeScript
127 lines
4.6 KiB
TypeScript
import type { MetaFunction } from "@remix-run/node";
|
||
import { ClientOnly } from "../components/ClientOnly";
|
||
import { Suspense, useState } from "react";
|
||
import ProfilePagesHeader from "../components/ProfilePagesHeader";
|
||
import { lazyWithPreload } from "~/utils/lazy-import";
|
||
import { MapPin } from "lucide-react";
|
||
|
||
export const meta: MetaFunction = () => {
|
||
return [
|
||
{ title: "افزودن آدرس" },
|
||
{
|
||
name: "description",
|
||
content: "افزودن آدرس برای انتخاب موقعیت و دریافت آدرس",
|
||
},
|
||
];
|
||
};
|
||
|
||
export default function AddLocation() {
|
||
const [showMap, setShowMap] = useState(false);
|
||
|
||
return (
|
||
<div className="flex flex-col gap-2 w-full">
|
||
<ProfilePagesHeader title="افزودن آدرس" />
|
||
|
||
{!showMap ? (
|
||
// Show form first with option to use map
|
||
<ClientOnly
|
||
fallback={
|
||
<div className="h-[200px] w-full bg-WHITE3 flex items-center justify-center">
|
||
در حال بارگذاری...
|
||
</div>
|
||
}
|
||
>
|
||
{() => {
|
||
const InteractiveMap = lazyWithPreload(
|
||
() => import("../components/InteractiveMap")
|
||
);
|
||
return (
|
||
<Suspense
|
||
fallback={
|
||
<div className="h-[200px] w-full bg-WHITE3 flex items-center justify-center animate-pulse">
|
||
<div className="flex flex-col items-center gap-2">
|
||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||
<span className="text-GRAY">در حال بارگذاری...</span>
|
||
</div>
|
||
</div>
|
||
}
|
||
>
|
||
<div className="flex flex-col gap-4">
|
||
{/* Button to show map */}
|
||
<div className="px-4">
|
||
<button
|
||
onClick={() => setShowMap(true)}
|
||
className="w-full flex items-center justify-center gap-2 py-3 px-4 border-2 border-dashed border-GRAY2 rounded-lg text-GRAY hover:border-primary hover:text-primary transition-colors"
|
||
>
|
||
<MapPin className="w-5 h-5" />
|
||
<span>انتخاب آدرس از روی نقشه</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Form only mode */}
|
||
<InteractiveMap formOnly={true} />
|
||
</div>
|
||
</Suspense>
|
||
);
|
||
}}
|
||
</ClientOnly>
|
||
) : (
|
||
// Show map when user clicks the button
|
||
<ClientOnly
|
||
fallback={
|
||
<div className="h-[500px] w-full bg-WHITE3 flex items-center justify-center">
|
||
در حال بارگذاری نقشه...
|
||
</div>
|
||
}
|
||
>
|
||
{() => {
|
||
const InteractiveMap = lazyWithPreload(
|
||
() => import("../components/InteractiveMap")
|
||
);
|
||
return (
|
||
<Suspense
|
||
fallback={
|
||
<div className="h-[500px] w-full bg-WHITE3 flex items-center justify-center animate-pulse">
|
||
<div className="flex flex-col items-center gap-2">
|
||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||
<span className="text-GRAY">
|
||
در حال بارگذاری نقشه...
|
||
</span>
|
||
</div>
|
||
</div>
|
||
}
|
||
>
|
||
<div className="flex flex-col gap-2">
|
||
{/* Back button */}
|
||
<div className="px-4">
|
||
<button
|
||
onClick={() => setShowMap(false)}
|
||
className="flex items-center gap-2 text-GRAY hover:text-primary transition-colors"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
>
|
||
<polyline points="9 18 15 12 9 6"></polyline>
|
||
</svg>
|
||
<span>بازگشت به فرم</span>
|
||
</button>
|
||
</div>
|
||
<InteractiveMap />
|
||
</div>
|
||
</Suspense>
|
||
);
|
||
}}
|
||
</ClientOnly>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|