change name logind all component

2025-11-23 08:39:30 +03:30
parent 9eadbb568b
commit 42960e581a
32 changed files with 526 additions and 47 deletions
@@ -0,0 +1,45 @@
+import { type FC } from 'react'
+import { Location } from 'iconsax-react'
+import Error from '@/components/Error'
+
+type LocationInputProps = {
+    label?: string
+    latitude?: number
+    longitude?: number
+    onClick: () => void
+    error_text?: string
+}
+
+const LocationInput: FC<LocationInputProps> = ({
+    label,
+    latitude,
+    longitude,
+    onClick,
+    error_text,
+}) => {
+    const getLocationDisplay = () => {
+        if (latitude && longitude) {
+            return `${latitude.toFixed(6)}, ${longitude.toFixed(6)}`
+        }
+        return 'روی نقشه کلیک کنید'
+    }
+
+    return (
+        <div className='mt-8'>
+            {label && <div className='text-sm mb-1'>{label}</div>}
+            <div
+                onClick={onClick}
+                className='w-full bg-white h-10 text-black px-4 text-xs rounded-xl border border-border flex items-center gap-2 cursor-pointer mt-1'
+            >
+                <Location size={20} color='#8C90A3' />
+                <span className='flex-1 text-right'>{getLocationDisplay()}</span>
+            </div>
+            {error_text && (
+                <Error errorText={error_text} />
+            )}
+        </div>
+    )
+}
+
+export default LocationInput
+
@@ -0,0 +1,72 @@
+import { type FC, useState, useEffect } from 'react'
+import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet'
+import { Icon } from 'leaflet'
+import type { LatLngTuple } from 'leaflet'
+
+interface LocationPickerProps {
+    initialPosition?: [number, number]
+    onLocationSelect: (lat: number, lng: number) => void
+}
+
+const ChangeView = ({ center, zoom }: { center: LatLngTuple; zoom: number }) => {
+    const map = useMap()
+    useEffect(() => {
+        map.setView(center, zoom)
+    }, [map, center, zoom])
+    return null
+}
+
+const LocationPicker: FC<LocationPickerProps> = ({ initialPosition, onLocationSelect }) => {
+    const [position, setPosition] = useState<LatLngTuple>(
+        initialPosition || [35.6892, 51.3890] // تهران به عنوان پیش‌فرض
+    )
+
+    useEffect(() => {
+        if (initialPosition) {
+            setPosition(initialPosition)
+        }
+    }, [initialPosition])
+
+    const LocationMarker = () => {
+        useMapEvents({
+            click(e) {
+                const newPosition: LatLngTuple = [e.latlng.lat, e.latlng.lng]
+                setPosition(newPosition)
+                onLocationSelect(newPosition[0], newPosition[1])
+            },
+        })
+
+        const customIcon = new Icon({
+            iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+            iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+            shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+            shadowSize: [41, 41],
+        })
+
+        return position ? <Marker position={position} icon={customIcon} /> : null
+    }
+
+    return (
+        <div className="w-full h-[400px] rounded-xl overflow-hidden">
+            <MapContainer
+                center={position}
+                zoom={13}
+                style={{ height: '100%', width: '100%' }}
+                scrollWheelZoom={true}
+            >
+                <ChangeView center={position} zoom={13} />
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <LocationMarker />
+            </MapContainer>
+        </div>
+    )
+}
+
+export default LocationPicker
+