diff --git a/src/Components/Profile/ContactInfo.tsx b/src/Components/Profile/ContactInfo.tsx new file mode 100644 index 00000000..43ec9e0d --- /dev/null +++ b/src/Components/Profile/ContactInfo.tsx @@ -0,0 +1,35 @@ + +const ContactInfo = ({ contact }) => ( +
+

Du hast Fragen?

+
+
+ {contact.avatarSrc ? ( + {contact.name} + ) : ( + + + + + + )} +
+
+

{contact.name}

+ + + + + + + {contact.email} + +
+
+
+); + +export default ContactInfo; \ No newline at end of file diff --git a/src/Components/Profile/OverlayItemProfile.tsx b/src/Components/Profile/OverlayItemProfile.tsx index 3be57efe..1e3a46d2 100644 --- a/src/Components/Profile/OverlayItemProfile.tsx +++ b/src/Components/Profile/OverlayItemProfile.tsx @@ -22,6 +22,9 @@ import { useClusterRef } from '../Map/hooks/useClusterRef'; import { useLeafletRefs } from '../Map/hooks/useLeafletRefs'; import { getValue } from '../../Utils/GetValue'; import { TagView } from '../Templates/TagView'; +import RelationCard from "./RelationCard"; +import ContactInfo from "./ContactInfo"; +import ProfileSubHeader from "./ProfileSubHeader"; export function OverlayItemProfile() { @@ -270,45 +273,96 @@ export function OverlayItemProfile() { navigate("/"); } + const d = { + groupName: "Gruppe Berlin-Britz", + location: "12347 Berlin-Britz", + country: "Berlin, Deutschland", + countryCode: "de", + contact: { + name: "Lisa Mustermann", + email: "lisa.mustermann@gmx.de", + avatarSrc: "https://cdn.prod.website-files.com/65c0d5530322d3f6f5f86099/65c0d5530322d3f6f5f86781_Andr%C3%A9.jpg" // optional + }, + description: "Unsere KulturArche, ein historischer Frachtsegler...", + relations: [ + { + title: "KulturArche EALA", + description: "Durchaus beeindruckt von der Ethik und der Arbeit...", + imageSrc: "https://cdn.prod.website-files.com/65c0d5530322d3f6f5f86099/65c0d5530322d3f6f5f86767_IMG_20190302_173147.jpg" + }, + // Add more projects as needed + ], + url: window.location.href, + title: "Gruppe Berlin-Britz" + }; + + + return ( <> {item && - + <> - navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} /> +
+ navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} /> +
{item.layer?.itemType.onepager && - <> - -
- {relations && relations.map(i => + <> + + {d.contact && ( + + )} -
navigate('/item/' + i.id)}> - -
- -
+ {/* Description Section */} +
+

Beschreibung

+

+ {d.description ?? 'Keine Beschreibung vorhanden'} +

- )} - {updatePermission && } -
- + {/* Relations Section */} + {d.relations && ( +
+

Projekte

+ {d.relations.map((project, index) => ( + + ))} +
+ )} + } - {!item.layer?.itemType.onepager && -
- updateActiveTab(1)} /> -
- {item.layer?.itemType.show_start_end && -
- } - -
+ {!item.layer?.itemType.onepager && +
+ updateActiveTab(1)}/> +
+ {item.layer?.itemType.show_start_end && +
+ } + +
{item.layer?.itemType.offers_and_needs && diff --git a/src/Components/Profile/ProfileSubHeader.tsx b/src/Components/Profile/ProfileSubHeader.tsx new file mode 100644 index 00000000..0bec7344 --- /dev/null +++ b/src/Components/Profile/ProfileSubHeader.tsx @@ -0,0 +1,34 @@ +import SocialShareBar from './SocialShareBar'; + + +const flags = { + de: ( + + + + + + ), + at: ( + + + + + + ) +}; + +const SubHeader = ({ location, country, countryCode, url, title }) => ( +
+
+ {location} + {flags[countryCode] || null} + {country} +
+
+ +
+
+); + +export default SubHeader; \ No newline at end of file diff --git a/src/Components/Profile/RelationCard.tsx b/src/Components/Profile/RelationCard.tsx new file mode 100644 index 00000000..4d153188 --- /dev/null +++ b/src/Components/Profile/RelationCard.tsx @@ -0,0 +1,16 @@ + +const RelationCard = ({ title, description, imageSrc }) => ( +
+ {imageSrc && ( +
+ {title} +
+ )} +
+

{title}

+

{description}

+
+
+); + +export default RelationCard; \ No newline at end of file diff --git a/src/Components/Profile/SocialShareBar.tsx b/src/Components/Profile/SocialShareBar.tsx new file mode 100644 index 00000000..e66ac421 --- /dev/null +++ b/src/Components/Profile/SocialShareBar.tsx @@ -0,0 +1,20 @@ +import SocialShareButton from './SocialShareButton'; + +const SocialShareBar = ({ url, title, platforms = ['facebook', 'twitter', 'linkedin', 'xing', 'email'] }) => { + return ( +
+ Teilen: +
+ {platforms.map((platform) => ( + + ))} +
+
+ ); +}; + +export default SocialShareBar; \ No newline at end of file diff --git a/src/Components/Profile/SocialShareButton.tsx b/src/Components/Profile/SocialShareButton.tsx new file mode 100644 index 00000000..5053369f --- /dev/null +++ b/src/Components/Profile/SocialShareButton.tsx @@ -0,0 +1,80 @@ +import * as React from 'react'; + +const platformConfigs = { + facebook: { + shareUrl: 'https://www.facebook.com/sharer/sharer.php?u={url}', + icon: ( + + + + ), + bgColor: '#3b5998' + }, + twitter: { + shareUrl: 'https://twitter.com/intent/tweet?text={title}:%20{url}', + icon: ( + + + + ), + bgColor: '#55acee' + }, + linkedin: { + shareUrl: 'http://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}', + icon: ( + + + + + ), + bgColor: '#4875b4' + }, + xing: { + shareUrl: 'https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url={url}', + icon: ( + + + + ), + bgColor: '#026466' + }, + email: { + shareUrl: 'mailto:?subject={title}&body={url}', + icon: ( + + + + ), + bgColor: '#444444' + } +}; + +const SocialShareButton = ({ platform, url, title }) => { + const config = platformConfigs[platform]; + + if (!config) { + return null; + } + + const { shareUrl, icon, bgColor } = config; + const finalShareUrl = shareUrl + .replace('{url}', encodeURIComponent(url)) + .replace('{title}', encodeURIComponent(title)); + + return ( + + {React.cloneElement(icon, { className: 'tw-w-4 tw-h-4 tw-fill-current' })} + + ); +}; + +export default SocialShareButton; \ No newline at end of file diff --git a/src/Components/Templates/MapOverlayPage.tsx b/src/Components/Templates/MapOverlayPage.tsx index fd84d9ba..614a703e 100644 --- a/src/Components/Templates/MapOverlayPage.tsx +++ b/src/Components/Templates/MapOverlayPage.tsx @@ -3,7 +3,7 @@ import * as L from 'leaflet'; import * as React from 'react' import { useNavigate } from 'react-router-dom'; -export function MapOverlayPage({ children, className, backdrop, card = true }: { children: React.ReactNode, className?: string, backdrop?: boolean, card?:boolean }) { +export function MapOverlayPage({ children, className, backdrop, card = true, padding = true }: { children: React.ReactNode, className?: string, backdrop?: boolean, card?:boolean, padding?:boolean }) { const closeScreen = () => { @@ -32,7 +32,7 @@ export function MapOverlayPage({ children, className, backdrop, card = true }: { return (
-
+
{children}