Move dashboardi into own route

src/components/main/Root.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts";
 import { format, addDays } from "date-fns";
+import { Dashboard } from "@/components/main/routes/Dashboard";
 
 const formatDate = function (dateTime) {
   return format(dateTime, "yyyy-MM-dd");
@@ -50,35 +51,19 @@ const WeatherChart = function ({ data }) {
     </LineChart>
   );
 };
+
 const App: React.FC = () => {
-  const [data, setData] = useState(null);
-
-  const minDate = addDays(new Date(), 14);
-  const maxDate = addDays(new Date(), 300);
-
-  const [dateTime, setDateTime] = useState(minDate);
-
-  useEffect(() => {
-    fetchWeekForecastData(dateTime, setData);
-  }, [dateTime]);
+  const [options, setOptions] = useState({
+    lineWidth: undefined,
+    defaultDate: undefined,
+  });
 
   return (
     <div className="fixed top-0 right-0 bottom-0 left-0 flex">
       <main className="flex grow flex-col">
-        <nav className="flex p-3 border-b border-solid border-slate-300">
-          <label>
-            Forecast date (min. of 14 days in advance)
-            <input
-              type="date"
-              value={formatDate(dateTime)}
-              min={formatDate(minDate)}
-              max={formatDate(maxDate)}
-              onChange={(e) => setDateTime(e.target.valueAsDate)}
-            />
-          </label>
-        </nav>
+        <nav className="flex p-3 border-b border-solid border-slate-300"></nav>
         <div className="flex grow items-center justify-center h-full w-full">
-          {data ? <WeatherChart data={data} /> : "Loading..."}
+          <Dashboard startDate={options.defaultDate} />
         </div>
       </main>
     </div>