feat: add error modal component

src/App.tsx

 import React, { useEffect, useState } from 'react';
 import useSWR from 'swr';
 import SidebarListView from './Sidebar/SidebarListView';
-// import mockData from './testData.json';
 import type { PointOfInterest } from './types/PointOfInterest';
 import SidebarSingleView from './Sidebar/SidebarSingleView';
 import Map from './Map/Map';
+import Modal from './Modal';
+import { ExclamationOutline as AlertIcon } from 'heroicons-react';
 
 function App() {
   const [poiData, setPoiData] = useState<PointOfInterest[]>([]);
   const [selectedPoi, setSelectedPoi] = useState<null | PointOfInterest>(null);
   const [hoveredPoiId, setHoveredPoiId] = useState<null | number>(null);
+  const [showErrorModal, setShowErrorModal] = useState<boolean>(false);
 
   const handlePoiClick = (id: number) => {
     const newPoi = poiData.find((poi) => poi.id === id);
@@ -45,35 +47,45 @@ function App() {
 
   useEffect(() => {
     data && console.log('Fetched new data', data);
-    data && data.pois && setPoiData(data.pois);
+    data?.pois && setPoiData(data.pois);
   }, [data]);
 
   useEffect(() => {
     error && console.error('Error while fetching', error);
+    setShowErrorModal(true);
   }, [error]);
 
   return (
-    <div className={'flex md:flex-row-reverse flex-col h-full'}>
-      <Map
-        onMouseEnter={handlePoiHoverOn}
-        onMouseLeave={handlePoiHoverOff}
-        hoveredPoiId={hoveredPoiId}
-        values={poiData}
-        onSelect={handlePoiClick}
-        selectedEntry={selectedPoi}
-      />
-      {selectedPoi ? (
-        <SidebarSingleView className="sidebar" value={selectedPoi} onClose={handlePoiClose} />
-      ) : (
-        <SidebarListView
+    <>
+      {showErrorModal && (
+        <Modal
+          title="API nicht erreichbar"
+          text="Kann die API nicht erreichen. Bitte später erneut probieren."
+          icon={<AlertIcon className="h-6 w-6 text-red-600" />}
+        />
+      )}
+      <div className={'flex md:flex-row-reverse flex-col h-full'}>
+        <Map
           onMouseEnter={handlePoiHoverOn}
           onMouseLeave={handlePoiHoverOff}
-          className="sidebar"
+          hoveredPoiId={hoveredPoiId}
           values={poiData}
-          onClick={handlePoiClick}
+          onSelect={handlePoiClick}
+          selectedEntry={selectedPoi}
         />
-      )}
-    </div>
+        {selectedPoi ? (
+          <SidebarSingleView className="sidebar" value={selectedPoi} onClose={handlePoiClose} />
+        ) : (
+          <SidebarListView
+            onMouseEnter={handlePoiHoverOn}
+            onMouseLeave={handlePoiHoverOff}
+            className="sidebar"
+            values={poiData}
+            onClick={handlePoiClick}
+          />
+        )}
+      </div>
+    </>
   );
 }
 

src/Map/Map.tsx

@@ -33,7 +33,7 @@ export const Map: React.FC<Props> = (props) => {
   return (
     <MapContainer
       id={'mapid'}
-      className={'h-full w-full'}
+      className={'h-full w-full z-0'}
       style={{ flex: 3 }}
       center={DEFAULT_CENTER}
       zoom={13}

src/Modal.tsx

+import React from 'react';
+
+interface Props {
+  title: string;
+  text: string;
+  icon?: JSX.Element;
+}
+
+const Modal: React.FC<Props> = ({ title, text, icon }) => {
+  return (
+    <div role="dialog" aria-modal="true" className="fixed z-10 inset-0 flex flex-column items-center justify-center">
+      <div className="fixed inset-0 bg-gray-400 bg-opacity-50" aria-hidden="true"></div>
+      <div className="inline-block z-10 bg-white rounded-lg text-left overflow-hidden shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+        <div className="bg-white p-4 sm:p-6">
+          <div className="sm:flex sm:items-start">
+            {icon && (
+              <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                {icon}
+              </div>
+            )}
+            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+                {title}
+              </h3>
+              <div className="mt-2">
+                <p className="text-sm text-gray-500">{text}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;