From a3a6d6a3e979bd34873421b732d9a589354304c0 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 23 Jan 2024 17:30:03 +0100
Subject: [PATCH] Add options

---
 src/components/main/routes/Options.tsx | 34 ++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/main/routes/Options.tsx

diff --git a/src/components/main/routes/Options.tsx b/src/components/main/routes/Options.tsx
new file mode 100644
index 0000000..9433b2f
--- /dev/null
+++ b/src/components/main/routes/Options.tsx
@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { path } from "ramda";
+import { ForecastDatePicker } from "@/components/ui/DatePicker";
+
+export const Options = function ({ state, updateState }) {
+  return (
+    <div
+      className="flex flex-col p-5 bg-white border border-solid border-slate-300 rounded-lg space-y-5 w-full h-full"
+      style={{ maxWidth: "810px", maxHeight: "470px" }}
+    >
+      <h1 className="text-lg font-medium mb-1">Options</h1>
+      <label className="font-medium">
+        Chart line width:
+        <Input
+          type="number"
+          defaultValue="1"
+          min="1"
+          value={path(["options", "lineWidth"], state)}
+          onChange={(e) =>
+            updateState({ options: { lineWidth: e.target.value } })
+          }
+        />
+      </label>
+      <label>
+        <ForecastDatePicker
+          onChange={(dateTime) =>
+            updateState({ options: { defaultDate: dateTime } })
+          }
+        />
+      </label>
+    </div>
+  );
+};