- preparation for presentation

src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx

@@ -9,18 +9,22 @@ import { getValue } from '../../../../Utils/GetValue';
 import remarkBreaks from 'remark-breaks';
 import { decodeTag } from '../../../../Utils/FormatTags';
 
-export const TextView = ({ item, truncate = false, itemTextField }: { item?: Item, truncate?: boolean, itemTextField?: string }) => {
+export const TextView = ({ item, truncate = false, itemTextField, rawText }: { item?: Item, truncate?: boolean, itemTextField?: string, rawText?: string }) => {
   const tags = useTags();
   const addFilterTag = useAddFilterTag();
 
   let text = "";
+  let replacedText = "";
 
-  if (itemTextField && item) text = getValue(item, itemTextField);
-  else text = item?.layer?.itemTextField && item ? getValue(item, item.layer?.itemTextField) : "";
+  if (rawText)
+    text = replacedText = rawText;
+  else if (itemTextField && item)
+    text = getValue(item, itemTextField);
+  else
+    text = item?.layer?.itemTextField && item ? getValue(item, item.layer?.itemTextField) : "";
 
   if (item && text && truncate) text = truncateText(removeMarkdownKeepLinksAndParagraphs(text), 100);
 
-  let replacedText;
 
   item && text ? replacedText = fixUrls(text) : "";
 
@@ -100,7 +104,7 @@ export const TextView = ({ item, truncate = false, itemTextField }: { item?: Ite
   };
 
   return (
-    <Markdown className={`tw-text-map tw-leading-map `} remarkPlugins={[remarkBreaks]} components={{
+    <Markdown className={`tw-text-map tw-leading-map tw-text-sm`} remarkPlugins={[remarkBreaks]} components={{
       p: CustomParagraph,
       a: ({ href, children }) => {
         const isYouTubeVideo = href?.startsWith('https://www.youtube.com/watch?v=');

src/Components/Profile/ContactInfo.tsx

@@ -8,17 +8,25 @@ const ContactInfo = ({ email, name, avatar } : {email: string, name: string, ava
     <div className="tw-bg-gray-100 tw-my-10 tw-p-6">
         <h2 className="tw-text-lg tw-font-semibold">Du hast Fragen?</h2>
         <div className="tw-mt-4 tw-flex tw-items-center">
-            <div className="tw-w-20 tw-h-20 tw-bg-gray-200 tw-rounded-full tw-mr-5 tw-flex tw-items-center tw-justify-center">
-                {avatar ? (
-                    <img src={assetsApi.url+avatar} alt={name} className="tw-w-full tw-h-full tw-rounded-full" />
-                ) : (
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="tw-w-6 tw-h-6"
-                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-                        <circle cx="12" cy="7" r="4"></circle>
-                    </svg>
-
-                    )}
+            <div className="tw-mr-5 tw-flex tw-items-center tw-justify-center">
+                <div className="tw-avatar">
+                    <div
+                        className="tw-w-20 tw-h-20 tw-bg-gray-200 rounded-full tw-flex tw-items-center tw-justify-center overflow-hidden">
+                        {avatar ? (
+                            <img src={assetsApi.url + avatar} alt={name}
+                                 className="tw-w-full tw-h-full tw-object-cover"/>
+                        ) : (
+                            <div className="tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="tw-w-12 tw-h-12"
+                                     fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+                                     strokeLinejoin="round">
+                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                                    <circle cx="12" cy="7" r="4"></circle>
+                                </svg>
+                            </div>
+                        )}
+                    </div>
+                </div>
             </div>
             <div className="tw-text-sm">
                 <p className="tw-font-semibold">{name}</p>
@@ -35,6 +43,7 @@ const ContactInfo = ({ email, name, avatar } : {email: string, name: string, ava
             </div>
         </div>
     </div>
-)}
+    )
+}
 
 export default ContactInfo;

src/Components/Profile/OverlayItemProfile.tsx

@@ -25,7 +25,6 @@ import { TagView } from '../Templates/TagView';
 import RelationCard from "./RelationCard";
 import ContactInfo from "./ContactInfo";
 import ProfileSubHeader from "./ProfileSubHeader";
-import SocialShareBar from './SocialShareBar';
 
 export function OverlayItemProfile() {
 
@@ -276,7 +275,7 @@ export function OverlayItemProfile() {
 
     const d = {
         groupName: "Gruppe Berlin-Britz",
-        location: "12347 Berlin-Britz",
+        location: "🇩🇪  12347 Berlin",
         country: "Berlin, Deutschland",
         countryCode: "de",
         contact: {
@@ -298,6 +297,7 @@ export function OverlayItemProfile() {
     };
 
 
+
     return (
         <>
             {item &&
@@ -305,26 +305,31 @@ export function OverlayItemProfile() {
                     className={`${item.layer?.itemType.onepager && '!tw-p-0'} tw-mx-4 tw-mt-4 tw-max-h-[calc(100dvh-96px)] tw-h-[calc(100dvh-96px)] md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-min-w-80 tw-max-w-3xl !tw-left-0 sm:!tw-left-auto tw-top-0 tw-bottom-0 tw-transition-opacity tw-duration-500 ${!selectPosition ? 'tw-opacity-100 tw-pointer-events-auto' : 'tw-opacity-0 tw-pointer-events-none'}`}>
 
                     <>
-                    <div className={`${item.layer?.itemType.onepager && 'tw-p-4'}`}>
-                            <HeaderView showAddress api={item.layer?.api} item={item} deleteCallback={handleDelete} editCallback={() => navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} />
-                            <SocialShareBar url={""} title={"title"} />
-
-                    </div>
+                        <div className="tw-px-6 tw-pt-6">
+                            <HeaderView api={item.layer?.api} item={item} deleteCallback={handleDelete} editCallback={() => navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} />
+                            <ProfileSubHeader
+                                location={d.location}
+                                type={"Regionalgruppe"}
+                                url={d.url}
+                                title={d.title}
+                            />
+                        </div>
 
                         <div className='tw-h-full tw-overflow-y-auto fade'>
 
                         {item.layer?.itemType.onepager &&
                             <>
-
-
+                                {item.user_created.first_name && (
+                                    <ContactInfo name={item.user_created.first_name} avatar={item.user_created.avatar} email={item.contact} />
+                                )}
 
                                 {/* Description Section */}
-                                <TextView item={item}></TextView>
-
-
-                                {d.contact && (
-                                    <ContactInfo name={item.user_created.first_name} avatar={item.user_created.avatar} email={item.contact}/>
-                                )}
+                                <div className="tw-my-10 tw-px-6">
+                                    <h2 className="tw-text-lg tw-font-semibold">Beschreibung</h2>
+                                    <p className="tw-mt-2 tw-text-sm tw-text-gray-600">
+                                        <TextView rawText={item.text ?? 'Keine Beschreibung vorhanden'}/>
+                                    </p>
+                                </div>
 
                                 {/* Relations Section */}
                                 {d.relations && (

src/Components/Profile/ProfileSubHeader.tsx

@@ -18,12 +18,11 @@ const flags = {
     )
 };
 
-const SubHeader = ({ location, country, countryCode, url, title }) => (
-    <div className="tw-px-6">
+const SubHeader = ({ location, type, url, title }) => (
+    <div>
         <div className="tw-flex tw-items-center tw-mt-6">
-            <span className="tw-text-sm tw-text-gray-600">{location}</span>
-            <span className="tw-ml-6">{flags[countryCode] || null}</span>
-            <span className="tw-text-sm tw-text-gray-600 tw-ml-2">{country}</span>
+            <span className="tw-text-sm tw-text-gray-600">{type}</span>
+            <span className="tw-text-sm tw-text-gray-600 tw-ml-6">{location}</span>
         </div>
         <div className="tw-mt-4">
             <SocialShareBar url={url} title={title} />

src/Components/Profile/SocialShareBar.tsx

@@ -1,17 +1,15 @@
 import SocialShareButton from './SocialShareButton';
 
-const SocialShareBar = ({ url, title, platforms = ['facebook', 'twitter', 'linkedin', 'xing', 'email'] }) => {
+const SocialShareBar = ({url, title, platforms = ['facebook', 'twitter', 'linkedin', 'xing', 'email']}) => {
     return (
         <div className="tw-flex tw-items-center tw-justify-end tw-space-x-2">
-            <div className="tw-flex tw-space-x-2">
-                {platforms.map((platform) => (
-                    <SocialShareButton
-                        platform={platform}
-                        url={url}
-                        title={title}
-                    />
-                ))}
-            </div>
+            {platforms.map((platform) => (
+                <SocialShareButton
+                    platform={platform}
+                    url={url}
+                    title={title}
+                />
+            ))}
         </div>
     );
 };