From 33a683d4b08b2ae2e041be33aef7b4675e5f681f Mon Sep 17 00:00:00 2001
From: Bailey Pumfleet <pumfleet@hey.com>
Date: Thu, 7 Oct 2021 23:49:53 +0100
Subject: [PATCH] Add fix for create event type modal (#878)

Co-authored-by: Alex Johansson <alexander@n1s.se>
---
 pages/availability/troubleshoot.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/pages/availability/troubleshoot.tsx b/pages/availability/troubleshoot.tsx
index 47f8141f..64c6173d 100644
--- a/pages/availability/troubleshoot.tsx
+++ b/pages/availability/troubleshoot.tsx
@@ -15,7 +15,7 @@ dayjs.extend(utc);
 export default function Troubleshoot({ user }: inferSSRProps<typeof getServerSideProps>) {
   const [loading, setLoading] = useState(true);
   const [availability, setAvailability] = useState([]);
-  const [selectedDate] = useState(dayjs());
+  const [selectedDate, setSelectedDate] = useState(dayjs());
 
   function convertMinsToHrsMins(mins: number) {
     let h = Math.floor(mins / 60);
@@ -55,9 +55,17 @@ export default function Troubleshoot({ user }: inferSSRProps<typeof getServerSid
       <Shell
         heading="Troubleshoot"
         subtitle="Understand why certain times are available and others are blocked.">
-        <div className="bg-white max-w-md overflow-hidden shadow rounded-sm">
+        <div className="bg-white max-w-xl overflow-hidden shadow rounded-sm">
           <div className="px-4 py-5 sm:p-6">
-            Here is an overview of your day on {selectedDate.format("D MMMM YYYY")}:
+            Here is an overview of your day on{" "}
+            <input
+              type="date"
+              className="inline border-none h-8 p-0"
+              defaultValue={selectedDate.format("YYYY-MM-DD")}
+              onBlur={(e) => {
+                setSelectedDate(dayjs(e.target.value));
+              }}
+            />
             <small className="block text-neutral-400">
               Tip: Hover over the bold times for a full timestamp
             </small>