feat: headline for sidebar

src/Sidebar/SidebarListElement.tsx

@@ -10,7 +10,7 @@ const SidebarListElement: React.FC<Props> = ({ value, ...restProps }) => {
     value && (
       <div
         {...restProps}
-        className="border-2 border-black border-opacity-20 hover:border-opacity-40 cursor-pointer rounded-lg overflow-hidden m-4"
+        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-6">
           <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{value.category}</h2>

src/Sidebar/SidebarListView.tsx

@@ -11,11 +11,14 @@ interface Props {
 
 const SidebarListView: React.FC<Props> = ({ values, onClick, ...restProps }) => {
   return (
-    <SidebarContainer {...restProps}>
-      {values.map((poi) => (
-        <SidebarListElement key={poi.id} {...(onClick ? { onClick: () => onClick(poi.id) } : {})} value={poi} />
-      ))}
-    </SidebarContainer>
+    values && (
+      <SidebarContainer {...restProps}>
+        <h1 className="text-xl font-medium title-font m-4 text-gray-900 mb-2">{values.length} Orte:</h1>
+        {values.map((poi) => (
+          <SidebarListElement key={poi.id} {...(onClick ? { onClick: () => onClick(poi.id) } : {})} value={poi} />
+        ))}
+      </SidebarContainer>
+    )
   );
 };