style calendar a bit

components/calendar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import cx from 'classnames'
+import classnames from 'classnames'
 import useSWR from 'swr'
 import moment from 'moment'
 import { Calendar } from 'react-calendar-component'
@@ -29,15 +29,17 @@ export default function MyCalendar() {
   }
 
   return (
-    <>
-      <h2>Buchungsübersicht</h2>
+    <div className="mb-12">
+      <h2 className="text-xl">Buchungsübersicht</h2>
       <Calendar
-        onChangeMonth={(date) => setDate(date)}
+        onChangeMonth={(date: React.SetStateAction<moment.Moment>) =>
+          setDate(date)
+        }
         date={date}
         renderDay={({ day, classNames, onPickDate }) => (
           <div
             key={day.format()}
-            className={cx(
+            className={classnames(
               'Calendar-grid-item',
               day.isSame(moment(), 'day') && 'Calendar-grid-item--current',
               dayBooked(day.toDate()) && 'Calendar-grid-item--booked',
@@ -59,6 +61,16 @@ export default function MyCalendar() {
         )}
         onPickDate={() => {}}
       />
-    </>
+      <div className="mt-6 flex justify-center">
+        <div>
+          <div className="inline-block w-5 h-5 bg-green-200 rounded align-text-bottom"></div>
+          <span className="ml-2">Frei</span>
+        </div>
+        <div>
+          <div className="ml-6 inline-block w-5 h-5 bg-red-200 rounded align-text-bottom"></div>
+          <span className="ml-2">Belegt</span>
+        </div>
+      </div>
+    </div>
   )
 }