-
-
-
-
- {avatar && (
-
-
-
- )}
-
- 
setImageLoaded(true)}
- onError={() => setImageLoaded(false)}
- style={{ display: imageLoaded ? 'block' : 'none' }}
- />
- {!imageLoaded && (
-
- )}
-
-
-
-
- {title}
-
- {showAddress && address && !hideSubname && (
-
- {address}
-
- )}
- {subtitle && !hideSubname && (
-
- {subtitle}
-
- )}
- e.stopPropagation()} className={`${big ? 'tw:mt-5' : 'tw:mt-1'}`}>
- {(api?.deleteItem || item.layer?.api?.updateItem) &&
- (hasUserPermission(api?.collectionName!, 'delete', item) ||
- hasUserPermission(api?.collectionName!, 'update', item)) &&
- !hideMenu && (
-
-
-
-
- )}
- -
- {api?.updateItem &&
- hasUserPermission(api.collectionName!, 'update', item) &&
- editCallback && (
-
-
-
- item.layer?.customEditLink
- ? navigate(
- `${item.layer.customEditLink}${item.layer.customEditParameter ? `/${item.id}${params && '?' + params}` : ''} `,
- )
- : editCallback(e)
- }
- >
-
- -
- )}
- {api?.updateItem &&
- hasUserPermission(api.collectionName!, 'update', item) &&
- setPositionCallback && (
- - - - - - - )} - {api?.deleteItem && - hasUserPermission(api.collectionName!, 'delete', item) && - deleteCallback && ( -
-
-
- {loading ? (
-
- ) : (
-
- )} - -
- )}
-
e.stopPropagation()}>
-
- Do you want to delete {item.name}?
-
-
-
-
-
-
-
-
- ✅ Connected
+ } + + const tags = getItemTags(item) + return ( + + ) +} diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/DeleteModal.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/DeleteModal.tsx new file mode 100644 index 00000000..c721ba84 --- /dev/null +++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/DeleteModal.tsx @@ -0,0 +1,37 @@ +import DialogModal from '#components/Templates/DialogModal' + +import type { Item } from '#types/Item' + +interface DeleteModalProps { + item: Item + isOpen: boolean + onClose: () => void + onConfirm: (e: React.MouseEvent) => void +} + +export function DeleteModal({ item, isOpen, onClose, onConfirm }: DeleteModalProps) { + const handleConfirm = (e: React.MouseEvent) => { + onConfirm(e) + onClose() + } + + return ( + e.stopPropagation()}>
+
+ Do you want to delete {item.name}?
+
+
+
+
+
+
+
+
+ e.stopPropagation()} className={`${big ? 'tw:mt-5' : 'tw:mt-1'}`}>
+
+ )
+}
diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ItemAvatar.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ItemAvatar.tsx
new file mode 100644
index 00000000..90fa7f07
--- /dev/null
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ItemAvatar.tsx
@@ -0,0 +1,73 @@
+import { QrCodeIcon } from '@heroicons/react/24/solid'
+import { useState } from 'react'
+
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+
+import type { Item } from '#types/Item'
+
+interface ItemAvatarProps {
+ item: Item
+ big?: boolean
+ extraLarge?: boolean
+ showQrButton?: boolean
+ onQrClick?: () => void
+}
+
+export function ItemAvatar({
+ item,
+ big = false,
+ extraLarge = false,
+ showQrButton = false,
+ onQrClick,
+}: ItemAvatarProps) {
+ const appState = useAppState()
+ const [imageLoaded, setImageLoaded] = useState(false)
+
+ const imageSize = extraLarge ? 320 : 160
+ const avatar =
+ (item.image &&
+ appState.assetsApi.url + item.image + `?width=${imageSize}&height=${imageSize}`) ??
+ item.image_external
+
+ const hasAvatar = !!avatar
+
+ // If no avatar but QR button should be shown, show only the QR button
+ if (!hasAvatar && showQrButton) {
+ return (
+
+ )
+ }
+
+ if (!hasAvatar) return null
+
+ const avatarSize = extraLarge ? 'tw:w-32' : big ? 'tw:w-16' : 'tw:w-10'
+
+ return (
+
+
+
+ -
+ {hasUpdatePermission && editCallback && (
+
-
+
+ item.layer?.customEditLink
+ ? navigate(
+ `${item.layer.customEditLink}${item.layer.customEditParameter ? `/${item.id}${params.toString() ? '?' + params.toString() : ''}` : ''}`,
+ )
+ : editCallback(e)
+ }
+ >
+
+ +
+ )}
+ {hasUpdatePermission && setPositionCallback && (
+ - + + + + + )} + {hasDeletePermission && deleteCallback && ( +
-
+
+ {loading ? (
+
+ ) : (
+
+ )} + +
+ )}
+
+
+ )
+}
diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ItemTitle.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ItemTitle.tsx
new file mode 100644
index 00000000..713f3373
--- /dev/null
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ItemTitle.tsx
@@ -0,0 +1,132 @@
+import { MapPinIcon } from '@heroicons/react/24/solid'
+import { useEffect, useRef, useState } from 'react'
+
+import { useGeoDistance } from '#components/Map/hooks/useGeoDistance'
+import { useReverseGeocode } from '#components/Map/hooks/useReverseGeocode'
+
+import { useFormatDistance } from './hooks'
+
+import type { Item } from '#types/Item'
+
+interface ItemTitleProps {
+ item: Item
+ big?: boolean
+ truncateSubname?: boolean
+ subtitleMode?: 'address' | 'custom' | 'none'
+ hasAvatar?: boolean
+}
+
+export function ItemTitle({
+ item,
+ big = false,
+ truncateSubname = true,
+ subtitleMode = 'address',
+ hasAvatar = false,
+}: ItemTitleProps) {
+ const { distance } = useGeoDistance(item.position ?? undefined)
+ const { formatDistance } = useFormatDistance()
+ const titleRef = useRef
+ setImageLoaded(true)}
+ onError={() => setImageLoaded(false)}
+ style={{ display: imageLoaded ? 'block' : 'none' }}
+ />
+ {!imageLoaded && }
+
+ {showQrButton && (
+
+ )}
+
+
+ )
+}
diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/QRModal.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/QRModal.tsx
new file mode 100644
index 00000000..66f93d12
--- /dev/null
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/QRModal.tsx
@@ -0,0 +1,44 @@
+import QRCode from 'react-qr-code'
+
+import DialogModal from '#components/Templates/DialogModal'
+
+import { useShareLogic } from './hooks'
+import { ItemAvatar } from './ItemAvatar'
+import { ShareButton } from './ShareButton'
+
+import type { Item } from '#types/Item'
+
+interface QRModalProps {
+ item: Item
+ isOpen: boolean
+ onClose: () => void
+}
+
+export function QRModal({ item, isOpen, onClose }: QRModalProps) {
+ const { inviteLink } = useShareLogic(item)
+
+ return (
+
+ {title}
+
+ {subtitleMode === 'address' && address && (
+
+
+ )}
+ {subtitleMode === 'custom' && subtitle && (
+
+ {subtitle}
+
+ )}
+ e.stopPropagation()} className='tw:text-center tw:p-4'>
+
+ Share your Profile to expand your Network!
+ +
+
+
+
+
+
+ {inviteLink}
+
+
+
+
+
+ )
+}
diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/hooks.ts b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/hooks.ts
new file mode 100644
index 00000000..5d13af9b
--- /dev/null
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/hooks.ts
@@ -0,0 +1,77 @@
+import { toast } from 'react-toastify'
+
+import type { Item } from '#types/Item'
+import type { SharePlatformConfigs } from './types'
+
+export const useNavigationUrl = (coordinates?: [number, number]) => {
+ const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
+ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+ navigator.userAgent,
+ )
+
+ const getNavigationUrl = () => {
+ if (!coordinates) return ''
+
+ const [longitude, latitude] = coordinates
+
+ if (isIOS) {
+ return `https://maps.apple.com/?daddr=${latitude},${longitude}`
+ } else if (isMobile) {
+ return `geo:${latitude},${longitude}`
+ } else {
+ return `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`
+ }
+ }
+
+ return {
+ getNavigationUrl,
+ isMobile,
+ isIOS,
+ }
+}
+
+export const useShareLogic = (item?: Item) => {
+ const shareUrl = window.location.href
+ const shareTitle = item?.name ?? 'Utopia Map Item'
+ const inviteLink = shareUrl
+
+ const copyLink = () => {
+ navigator.clipboard
+ .writeText(inviteLink)
+ .then(() => {
+ toast.success('Link copied to clipboard')
+ return null
+ })
+ .catch(() => {
+ toast.error('Error copying link')
+ })
+ }
+
+ const getShareUrl = (
+ platform: keyof SharePlatformConfigs,
+ platformConfigs: SharePlatformConfigs,
+ ) => {
+ // eslint-disable-next-line security/detect-object-injection
+ const config = platformConfigs[platform]
+ return config.shareUrl
+ .replace('{url}', encodeURIComponent(shareUrl))
+ .replace('{title}', encodeURIComponent(shareTitle))
+ }
+
+ return {
+ shareUrl,
+ shareTitle,
+ inviteLink,
+ copyLink,
+ getShareUrl,
+ }
+}
+
+export const useFormatDistance = () => {
+ const formatDistance = (dist: number | null): string | null => {
+ if (!dist) return null
+ return dist < 10 ? `${dist.toFixed(1)} km` : `${Math.round(dist)} km`
+ }
+
+ return { formatDistance }
+}
diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/index.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/index.tsx
new file mode 100644
index 00000000..1befab1c
--- /dev/null
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/index.tsx
@@ -0,0 +1,91 @@
+import { useState } from 'react'
+
+import { useMyProfile } from '#components/Map/hooks/useMyProfile'
+
+import { ActionButtons } from './ActionButtons'
+import { ConnectionStatus } from './ConnectionStatus'
+import { DeleteModal } from './DeleteModal'
+import { EditMenu } from './EditMenu'
+import { ItemAvatar } from './ItemAvatar'
+import { ItemTitle } from './ItemTitle'
+import { QRModal } from './QRModal'
+
+import type { HeaderViewProps } from './types'
+
+export function HeaderView({
+ item,
+ api,
+ editCallback,
+ deleteCallback,
+ setPositionCallback,
+ loading,
+ hideMenu = false,
+ big = false,
+ truncateSubname = true,
+ showAddress = true,
+}: HeaderViewProps) {
+ const [modalOpen, setModalOpen] = useState
+
+ -
+
-
+
+ ++ Copy Link + +
+
+ -
+
+ ++ Email + +
+
+ {Object.entries(platformConfigs).map(([platform, config]) => (
+ -
+
+ + {(config as PlatformConfig).icon} ++ {(config as PlatformConfig).label} + +
+ ))}
+
+ setModalOpen(true)}
+ />
+
+
+ {big && (
+
+
+
+ setQrModalOpen(true)}
+ />
+
+
+
+
+ )}
+
+
+
+
-
-