added FilterPage with sliders and DropDownFilters for search Requests #13

growbros-frontend/src/components/DropDownFilter.tsx

+import { useState } from "react";
+
+function DropDownFilter(props: PropsDropDownFilter) {
+ 
+        const options = props.options;
+        const topic = props.topic;
+        const [selectedOption, setSelectedOption] = useState("");
+      
+        const handleOptionChange = (event: any) => {
+          setSelectedOption(event.target.value);
+        };
+      
+        return (
+          <div >
+            <label>{topic}</label>
+            <select value={selectedOption} onChange={handleOptionChange}>
+              <option value=""></option>
+              {options.map((option, index) => (
+                <option key={index} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+        );
+      }
+      
+      type PropsDropDownFilter = {
+        options: Array<string>;
+        topic: string;
+      };
+
+export default DropDownFilter
+

growbros-frontend/src/components/FilterPage.tsx

-
+import { useState } from "react";
+import Slider from "rc-slider";
+import "rc-slider/assets/index.css";
+import "../stylesheets/FilterPage.css";
+import DropDownFilter from "./DropDownFilter";
 
 function FilterPage() {
   return (
-    <div className="filterPage">
-      <h3>Setze Filter und suche nach passenden Pflanzen</h3>
-    </div>
+    <>
+      <div className="filterPage">
+        <h3>Setze Filter und suche nach passenden Pflanzen</h3>
+      </div>
+      <div>
+        <DropDownFilter
+          topic={"Wasserbedarf "}
+          options={["Trocken", "Feucht", "Sehr Feucht"]}
+        />
+        <DropDownFilter
+          topic={"Nährstoffbedarf "}
+          options={["Niedrig", "Mittel", "Hoch"]}
+        />
+        <DropDownFilter
+          topic={"Lichtbedarf "}
+          options={["Niedrig", "Mittel", "Hoch"]}
+        />
+        <DropDownFilter
+          topic={"Bodentyp"}
+          options={["Leicht", "Mittel", "Schwer"]}
+        />
+      </div>
+      <SliderFilter topic={"Anbauphase"} min={1} max={52} />
+      <SliderFilter topic={"Erntezeitraum"} min={1} max={52} />
+      <SliderFilter topic={"Wachstumsdauer"} min={1} max={52} />{" "}
+    </>
   );
 }
 
-/*function Filter() {
-  const options = ["Option 1", "Option 2", "Option 3"];
-  const [selectedOption, setSelectedOption] = useState("");
 
-  const handleOptionChange = (event) => {
-    setSelectedOption(event.target.value);
+
+
+function SliderFilter({ topic, min, max }: PropsSliderFilter) {
+  const [range, setRange] = useState([min, max]);
+
+  const handleRangeChange = (newRange: any) => {
+    setRange(newRange);
   };
 
   return (
-    <>
-      <label>Wählen Sie eine Option:</label>
-      <select value={selectedOption} onChange={handleOptionChange}>
-        <option value="">-- Bitte wählen --</option>
-        {options.map((option, index) => (
-          <option key={index} value={option}>
-            {option}
-          </option>
-        ))}
-      </select>
-    </>
+    <div>
+      <label>
+        {topic} von KW {range[0]} bis KW {range[1]}
+      </label>
+      <Slider
+        min={min}
+        max={max}
+        range
+        value={range}
+        onChange={handleRangeChange}
+      />
+    </div>
   );
-}*/
+}
+
+type PropsSliderFilter = {
+  topic: string;
+  min: number;
+  max: number;
+};
 
 export default FilterPage;
+