Bernard Ngandu
36 lines
1.6 KiB
TypeScript
36 lines
1.6 KiB
TypeScript
import type { MutableRefObject } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface MapViewportProps {
|
|
containerRef: MutableRefObject<HTMLDivElement | null>
|
|
isPosting: boolean
|
|
isLoading: boolean
|
|
confirmationHint?: string | null
|
|
}
|
|
|
|
export function MapViewport({ containerRef, isPosting, isLoading, confirmationHint }: MapViewportProps) {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className="relative min-h-[360px] flex-1 overflow-hidden rounded-3xl border border-border/50 bg-muted/40 shadow-inner">
|
|
<div ref={containerRef} className={cn('absolute inset-0 z-0', 'leaflet-wrapper')} />
|
|
<div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-24 bg-gradient-to-b from-background/70 to-transparent" />
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-24 bg-gradient-to-t from-background/70 to-transparent" />
|
|
{(isPosting || isLoading) && (
|
|
<div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center">
|
|
<span className="rounded-full border border-border/60 bg-background/80 px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground backdrop-blur">
|
|
{isPosting ? t('map.posting') : t('map.loading')}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{confirmationHint && (
|
|
<div className="pointer-events-none absolute bottom-6 left-1/2 z-20 w-[90%] max-w-sm -translate-x-1/2 rounded-full border border-border/70 bg-background/90 px-4 py-2 text-xs text-muted-foreground shadow-sm">
|
|
{confirmationHint}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|