diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index d14d22bd..806499b0 100644
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable security/detect-object-injection */
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
/* eslint-disable @typescript-eslint/no-misused-promises */
@@ -17,7 +18,16 @@ import { useState } from 'react'
import { LuNavigation } from 'react-icons/lu'
import SVG from 'react-inlinesvg'
import { useNavigate } from 'react-router-dom'
+import { toast } from 'react-toastify'
+import ChevronSVG from '#assets/chevron.svg'
+import ClipboardSVG from '#assets/share/clipboard.svg'
+import FacebookSVG from '#assets/share/facebook.svg'
+import LinkedinSVG from '#assets/share/linkedin.svg'
+import TelegramSVG from '#assets/share/telegram.svg'
+import TwitterSVG from '#assets/share/twitter.svg'
+import WhatsappSVG from '#assets/share/whatsapp.svg'
+import XingSVG from '#assets/share/xing.svg'
import TargetDotSVG from '#assets/targetDot.svg'
import { useAppState } from '#components/AppShell/hooks/useAppState'
import { useGeoDistance } from '#components/Map/hooks/useGeoDistance'
@@ -77,6 +87,67 @@ export function HeaderView({
return dist < 10 ? `${dist.toFixed(1)} km` : `${Math.round(dist)} km`
}
+ const platformConfigs = {
+ facebook: {
+ shareUrl: 'https://www.facebook.com/sharer/sharer.php?u={url}',
+ icon:
,
+ label: 'Facebook',
+ bgColor: '#3b5998',
+ },
+ twitter: {
+ shareUrl: 'https://twitter.com/intent/tweet?text={title}:%20{url}',
+ icon:
,
+ label: 'Twitter',
+ bgColor: '#55acee',
+ },
+ linkedin: {
+ shareUrl: 'http://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}',
+ icon:
,
+ label: 'LinkedIn',
+ bgColor: '#4875b4',
+ },
+ whatsapp: {
+ shareUrl: 'https://api.whatsapp.com/send?text={title}%20{url}',
+ icon:
,
+ label: 'WhatsApp',
+ bgColor: '#25D366',
+ },
+ telegram: {
+ shareUrl: 'https://t.me/share/url?url={url}&text={title}',
+ icon:
,
+ label: 'Telegram',
+ bgColor: '#0088cc',
+ },
+ xing: {
+ shareUrl: 'https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url={url}',
+ icon:
,
+ label: 'Xing',
+ bgColor: '#026466',
+ },
+ }
+
+ const shareUrl = window.location.href
+ const shareTitle = item?.name ?? 'Utopia Map Item'
+
+ const copyLink = () => {
+ navigator.clipboard
+ .writeText(shareUrl)
+ .then(() => {
+ toast.success('Link copied to clipboard')
+ return null
+ })
+ .catch(() => {
+ toast.error('Error copying link')
+ })
+ }
+
+ const getShareUrl = (platform: keyof typeof platformConfigs) => {
+ const config = platformConfigs[platform]
+ return config.shareUrl
+ .replace('{url}', encodeURIComponent(shareUrl))
+ .replace('{title}', encodeURIComponent(shareTitle))
+ }
+
const openDeleteModal = async (event: React.MouseEvent) => {
setModalOpen(true)
event.stopPropagation()
@@ -229,8 +300,58 @@ export function HeaderView({
-