feat: add react-select

package.json

@@ -17,6 +17,7 @@
     "react-dom": "^17.0.0",
     "react-leaflet": "^3.2.0",
     "react-router-dom": "^5.2.0",
+    "react-select": "^4.3.1",
     "swr": "^0.5.6",
     "tailwindcss": "^2.0.3",
     "zustand": "^3.5.1"
@@ -30,6 +31,7 @@
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "@types/react-router-dom": "^5.1.7",
+    "@types/react-select": "^4.0.15",
     "@types/snowpack-env": "^2.3.2",
     "@typescript-eslint/eslint-plugin": "^4.24.0",
     "@typescript-eslint/parser": "^4.24.0",

src/components/Sidebar/SidebarListView.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { usePoiData, useStore } from '../../hooks';
 import ListElement from './ListElement';
 import SidebarContainer from './SidebarContainer';
+import Select from 'react-select';
 
 const SidebarListView: React.FC = () => {
   const { data } = usePoiData();
@@ -9,8 +10,24 @@ const SidebarListView: React.FC = () => {
   const setHoveredPoi = useStore((state) => state.setHoveredPoi);
   const setSelectedPoi = useStore((state) => state.setSelectedPoi);
 
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+
   return (
     <SidebarContainer>
+      <div className="p-4">
+        <Select
+          defaultValue={[options[2], options[3]]}
+          isMulti
+          name="pois"
+          options={options}
+          className="basic-multi-select"
+          classNamePrefix="select"
+        />
+      </div>
       <h1 className="text-xl font-medium title-font m-4 text-gray-900 mb-2">{data?.length} Orte:</h1>
       {data?.map((poi) => (
         <ListElement