add month grid

src/View/Components/monthGrid.css

@@ -0,0 +1,25 @@
+.month-grid-wrapper {
+  display: grid;
+  gap: var(--gap-between-tiles);
+
+  height: 100%;
+
+  animation: slide-up var(--animation-duration);
+
+  grid-template-columns: repeat(7, minmax(0px, 1fr));
+  grid-auto-rows: 1fr;
+}
+
+.month-grid-wrapper .tile > div {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    width: 100%;
+}
+
+@media (max-width: 640px) {
+  .month-grid-wrapper .tile {
+    padding: 4px;
+  }
+}

src/View/Components/monthGrid.tsx

@@ -0,0 +1,39 @@
+import "./monthGrid.css";
+
+import * as React from "bloatless-react";
+import { MonthGrid } from "../../Model/Files/calendarModel";
+import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
+
+export function MonthGrid<T>(monthGrid: MonthGrid<React.MapState<T>>) {
+  const offsetElements: HTMLElement[] = [];
+  for (let i = 0; i < monthGrid.offset; i++) {
+    offsetElements.push(<div></div>);
+  }
+
+  const converter: React.StateItemConverter<TaskViewModel> = (
+    taskViewModel
+  ) => {
+    return <span class="ellipsis secondary">{taskViewModel.task.name}</span>;
+  };
+
+  return (
+    <div class="month-grid-wrapper">
+      {...offsetElements}
+      {...Object.entries(monthGrid.days).map((entry) => {
+        const [date, mapState] = entry;
+
+        return (
+          <button class="tile">
+            <div>
+              <b>{date}</b>
+              <div
+                class="flex-column gap clip"
+                children:append={[mapState, converter]}
+              ></div>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

src/View/Components/textSpan.tsx

@@ -0,0 +1,7 @@
+import * as React from "bloatless-react";
+
+export const StringToTextSpan: React.StateItemConverter<string> = (
+  string: string
+) => {
+  return <span>{string}</span>
+};