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>
   )
 }

styles/index.css

@@ -111,61 +111,41 @@
 }
 
 .Calendar-grid {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
+  @apply flex flex-wrap;
 }
 
 .Calendar-header {
-  height: 50px;
-  background: #333;
-  color: #fff;
-  text-align: center;
-  line-height: 50px;
-  display: flex;
-  font-size: 20px;
-  justify-content: space-between;
+  @apply flex justify-between bg-gray-700 text-gray-200 text-center;
 }
 
 .Calendar-header button {
-  width: 50px;
-  font-size: 20px;
-  border: 0;
-  background: transparent;
-  color: #ddd;
-  cursor: pointer;
+  @apply w-10 bg-transparent text-gray-200 cursor-pointer;
 }
 
 .Calendar-grid-item {
-  flex: 0 14.28571%;
-  text-align: center;
-  border-right: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  @apply text-center p-1 bg-green-200 border-r border-b border-solid border-gray-500;
+  flex: 0 calc(100% / 7);
 }
 
 .Calendar-grid-item--current {
-  font-weight: 700;
+  @apply font-bold;
 }
 
 .Calendar-grid-item--booked {
-  @apply bg-red-300;
+  @apply bg-red-200 cursor-not-allowed;
 }
 
 .Calendar-grid-item.nextMonth,
 .Calendar-grid-item.prevMonth {
-  color: #999;
+  @apply text-gray-500;
 }
 
 .Calendar-grid-item:nth-child(7n + 1) {
-  border-left: 1px solid #ddd;
+  @apply border-l;
 }
 
 .Calendar-grid-item:nth-child(-n + 7) {
-  border-top: 1px solid #ddd;
+  @apply border-t;
 }
 
 /* Start purging... */