Add ui base structure

src/components/main/Root.tsx

@@ -2,8 +2,12 @@ import React, { useState, useEffect } from "react";
 import { LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts";
 import { format, addDays } from "date-fns";
 
+const formatDate = function (dateTime) {
+  return format(dateTime, "yyyy-MM-dd");
+};
+
 const fetchWeekForecastData = async function (dateTime, cb) {
-  const formattedDate = format(dateTime, "yyyy-MM-d");
+  const formattedDate = formatDate(dateTime);
 
   const forecastRequests = Array.from({ length: 7 }).map((_, index) => {
     const date = addDays(dateTime, index);
@@ -49,13 +53,34 @@ const WeatherChart = function ({ data }) {
 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(addDays(new Date(), 14), setData);
+    fetchWeekForecastData(minDate, setData);
   }, []);
 
   return (
-    <div className="fixed top-0 right-0 bottom-0 left-0">
+    <div className="fixed top-0 right-0 bottom-0 left-0 flex">
-      {data ? <WeatherChart data={data} /> : "Loading..."}
+      <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>
+        <div className="flex grow items-center justify-center h-full w-full">
+          {data ? <WeatherChart data={data} /> : "Loading..."}
+        </div>
+      </main>
     </div>
   );
 };