fix: small stuff

src/Sidebar/SidebarListElement.tsx

@@ -12,10 +12,9 @@ const SidebarListElement: React.FC<Props> = ({ value, ...restProps }) => {
         {...restProps}
         className="border-2 border-black border-opacity-20 hover:border-opacity-40 cursor-pointer rounded-lg overflow-hidden mx-4 my-2"
       >
-        <div className="p-4">
+        <div className="p-3">
           <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{value.category}</h2>
-          <h1 className="title-font text-lg font-medium text-gray-900 mb-3">{value.name}</h1>
-          <p className="leading-relaxed">{value.description}</p>
+          <h1 className="title-font text-lg font-medium text-gray-900">{value.name}</h1>
         </div>
       </div>
     )

src/Sidebar/SidebarSingleView.tsx

@@ -10,6 +10,7 @@ interface Props {
 }
 
 const SidebarSingleView: React.FC<Props> = ({ value, onClose, ...restProps }) => {
+  const strippedUrl = value?.website?.replace(/(^\w+:|^)\/\//, '');
   return (
     <SidebarContainer className="relative p-0" {...restProps}>
       <CloseIcon
@@ -18,20 +19,16 @@ const SidebarSingleView: React.FC<Props> = ({ value, onClose, ...restProps }) =>
         onClick={onClose}
       />
 
-      <img
-        className="lg:h-48 md:h-36 w-full object-cover object-center"
-        src="https://picsum.photos/720/400"
-        alt="blog"
-      />
+      <img className="lg:h-48 md:h-36 w-full object-cover object-center" src={value.image} alt="blog" />
       <div className="p-6">
         <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{value.category}</h2>
         <h1 className="title-font text-lg font-medium text-gray-900 mb-3">{value.name}</h1>
-        <p className="leading-relaxed mb-3">{value.description}</p>
+        <p className="leading-relaxed mb-6">{value.description}</p>
         {value.website && (
           <div className={'flex items-center'}>
-            <HomeIcon size={20} className={'text-gray-500 mr-2'} />
-            <a className={'hover:underline'} href={value.website}>
-              {value.website.replace(/(^\w+:|^)\/\//, '')}
+            <HomeIcon size={18} className={'text-gray-500 mr-2'} />
+            <a className={'text-sm text-gray-500 hover:underline'} href={value.website}>
+              {strippedUrl}
             </a>
           </div>
         )}

src/testData.json

@@ -2,11 +2,12 @@
   {
     "id": 1,
     "latlng": [53.550359, 9.986701],
-    "name": "Welcome Werkstatt e. V.",
+    "name": "Welcome Werkstatt e. V.",
     "description": "Eine offene Stadtteilwerkstatt in Barmbek-Süd. Hier kann mit Holz, Metall und Elektronik gearbeitet werden.",
     "address": "Bachstr. 98, 22083 Hamburg",
     "category": "OFFENE WERKSTATT",
-    "website": "https://www.welcome-werkstatt.de/"
+    "website": "https://www.welcome-werkstatt.de/",
+    "image": "https://picsum.photos/720/400?random=1"
   },
   {
     "id": 2,
@@ -15,7 +16,8 @@
     "description": "Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.",
     "address": "Mozartstr. 8, 22081 Hamburg",
     "category": "OFFENE WERKSTATT",
-    "website": "http://www.fablab-hamburg.org/"
+    "website": "http://www.fablab-hamburg.org/",
+    "image": "https://picsum.photos/720/400?random=2"
   },
   {
     "id": 3,
@@ -24,7 +26,8 @@
     "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
     "address": "Langer-Straßen-Name. 128, 22089 Hamburg",
     "category": "OFFENE WERKSTATT",
-    "website": "https://hofalab.de/de/home-de/"
+    "website": "https://hofalab.de/de/home-de/",
+    "image": "https://picsum.photos/720/400?random=3"
   },
   {
     "id": 4,
@@ -32,7 +35,8 @@
     "name": "Fab City Haus",
     "description": "Eine offene Stadtteilwerkstatt in Barmbek-Süd. Hier kann mit Holz, Metall und Elektronik gearbeitet werden.",
     "address": "Jungfernstieg 1, 22083 Hamburg",
-    "category": "OFFENE WERKSTATT"
+    "category": "OFFENE WERKSTATT",
+    "image": "https://picsum.photos/720/400?random=4"
   },
   {
     "id": 5,
@@ -40,6 +44,7 @@
     "name": "Haus Drei e. V.",
     "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
     "address": "Hein-Hoyer-Allee 36, 22083 Hamburg",
-    "category": "OFFENE WERKSTATT"
+    "category": "OFFENE WERKSTATT",
+    "image": "https://picsum.photos/720/400?random=5"
   }
 ]

src/types/PointOfInterest.ts

@@ -8,6 +8,7 @@ export interface PointOfInterest {
   address: string;
   category: string;
   website?: string;
+  image: string;
 }
 
 interface Map {