Initial Calendar widget

src/WidgetMap.tsx

@@ -1,4 +1,5 @@
 import { BatteryWidget } from "./widgets/BatteryWidget";
+import { Calendar, CalendarSettings } from "./widgets/Calendar";
 import { Clock, ClockSettings } from "./widgets/Clock";
 import { Notepad } from "./widgets/Notepad";
 import { Search, SearchSettings } from "./widgets/Search";
@@ -12,6 +13,11 @@ const WidgetMap = {
     size: { width: 2, height: 1 },
   },
 
+  calendar: {
+    component: Calendar,
+    size: { width: 6, height: 6 },
+  },
+
   clock: {
     component: Clock,
     size: { width: 4, height: 2 },

src/widgets/Calendar.css

@@ -0,0 +1,83 @@
+.body {
+  display: flex;
+  flex-flow: column nowrap;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  gap: 4px;
+}
+
+.header {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+}
+
+.selector {
+  width: 21ch;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 700;
+  color: #fffc;
+  gap: 8px;
+}
+
+.selector-button {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #fffc;
+  padding: 2px;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+}
+
+.selector-button:hover {
+  background-color: #0002;
+  border: 1px solid #fff2;
+}
+
+.day-names {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  font-size: 0.8rem;
+  color: #fff8;
+}
+
+.month {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-rows: repeat(6, 1fr);
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+}
+
+.day {
+  background-color: #0002;
+  border: 1px solid #fff2;
+  border-radius: 8px;
+}
+
+.day.active {
+  background-color: #0004;
+}
+
+.day.today {
+  border: 1px solid #fff4;
+  background-color: #fff2;
+}
+
+.day span {
+  font-size: 0.8rem;
+  color: #fff8;
+  padding: 2px 4px;
+}

src/widgets/Calendar.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from "react";
+import { WidgetState } from "../Widget";
+import globalStyles from "../App.css";
+import styles from "./Calendar.css";
+import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+
+export interface CalendarSettings {}
+
+export function Calendar({ settings }: WidgetState<CalendarSettings>) {
+  const [date, setDate] = useState<Date>(new Date());
+  const offset = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+
+  const days = [];
+  for (let i = -offset; i < 42 - offset; i++) {
+    days.push(new Date(date.getFullYear(), date.getMonth(), i + 1));
+  }
+
+  return (
+    <div className={[globalStyles.container, styles.body].join(" ")}>
+      <div className={styles.header}>
+        <div className={styles.selector}>
+          <button
+            className={styles.selectorButton}
+            onClick={() => {
+              const _month = new Date(date);
+              _month.setMonth(_month.getMonth() - 1);
+              setDate(_month);
+            }}
+          >
+            <CaretLeftIcon size={16} weight={"bold"}></CaretLeftIcon>
+          </button>
+          <span>
+            {date.toLocaleDateString(undefined, {
+              month: "long",
+              year: "numeric",
+            })}
+          </span>
+          <button
+            className={styles.selectorButton}
+            onClick={() => {
+              const _month = new Date(date);
+              _month.setMonth(_month.getMonth() + 1);
+              setDate(_month);
+            }}
+          >
+            <CaretRightIcon size={16} weight={"bold"}></CaretRightIcon>
+          </button>
+        </div>
+      </div>
+      <div className={styles.dayNames}>
+        <span>Sun</span>
+        <span>Mon</span>
+        <span>Tue</span>
+        <span>Wed</span>
+        <span>Thu</span>
+        <span>Fri</span>
+        <span>Sat</span>
+      </div>
+      <div className={styles.month}>
+        {days.map((d, i) => {
+          const inMonth =
+            d.getFullYear() === date.getFullYear() &&
+            d.getMonth() === date.getMonth();
+
+          const now = new Date();
+          const today =
+            d.getFullYear() === now.getFullYear() &&
+            d.getMonth() === now.getMonth() &&
+            d.getDate() === now.getDate();
+          return (
+            <div
+              className={[
+                styles.day,
+                inMonth ? styles.active : "",
+                today ? styles.today : "",
+              ].join(" ")}
+              key={i}
+            >
+              <span>{d.getDate()}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}