kindle-calendar/calendar/src/components/CalendarCard.vue

<script setup lang="ts">
import { computed } from 'vue';

import AnalogClock from '@/components/AnalogClock.vue';
import type { CalendarModel } from '@/lib/calendar';
import type { DashboardMode } from '@/lib/dashboard-mode';

const props = defineProps<{
  model: CalendarModel;
  date: Date;
  mode: DashboardMode;
}>();

const weeks = computed(() => {
  const chunks: CalendarModel['cells'][] = [];

  for (let index = 0; index < props.model.cells.length; index += 7) {
    chunks.push(props.model.cells.slice(index, index + 7));
  }

  return chunks;
});

function subLabelTone(cell: CalendarModel['cells'][number]) {
  return cell.badges[0]?.tone ?? 'lunar';
}
</script>

<template>
  <section class="card calendar-card">
    <div class="calendar-card__hero">
      <div class="calendar-card__headline">
        <div class="calendar-card__day">{{ model.largeDay }}</div>
        <div class="calendar-card__headline-copy">
          <p class="calendar-card__lunar-day">{{ model.lunarDayLabel }}</p>
          <p class="calendar-card__weekday">{{ model.weekdayLabel }}</p>
        </div>
      </div>
      <AnalogClock :date="date" :mode="mode" :size="220" />
    </div>

    <div class="calendar-card__panel">
      <div class="calendar-card__panel-header">
        <div>
          <p class="calendar-card__panel-title">{{ model.gregorianLabel }}</p>
        </div>
        <div v-if="model.summaryBadges.length" class="calendar-card__badges">
          <span
            v-for="badge in model.summaryBadges"
            :key="badge.label"
            :class="['calendar-card__badge', `calendar-card__badge--${badge.tone}`]"
          >
            {{ badge.label }}
          </span>
        </div>
      </div>

      <div class="calendar-card__grid">
        <div v-for="label in model.weekLabels" :key="label" class="calendar-card__week-label">
          {{ label }}
        </div>

        <template v-for="week in weeks" :key="week[0].date.toISOString()">
          <div
            v-for="cell in week"
            :key="cell.date.toISOString()"
            :class="[
              'calendar-card__cell',
              {
                'calendar-card__cell--muted': !cell.currentMonth,
                'calendar-card__cell--today': cell.isToday,
                'calendar-card__cell--holiday': cell.badges.some((badge) => badge.tone === 'holiday'),
              },
            ]"
          >
            <div class="calendar-card__cell-copy">
              <span class="calendar-card__solar">{{ cell.day }}</span>
              <span
                :class="[
                  'calendar-card__sub',
                  `calendar-card__sub--${subLabelTone(cell)}`,
                ]"
              >
                {{ cell.subLabel }}
              </span>
            </div>
          </div>
        </template>
      </div>
    </div>
  </section>
</template>

<style scoped>
.calendar-card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  gap: 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.calendar-card__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: flex-start;
  gap: 1rem;
}

.calendar-card__headline {
  display: grid;
  align-content: start;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.24rem;
}

.calendar-card__headline-copy {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-card__day {
  font-family: var(--display-font);
  font-size: calc(6.9rem * var(--theme-font-scale, 1));
  line-height: 0.88;
  letter-spacing: -0.08em;
  color: var(--ink);
}

.calendar-card__lunar-day,
.calendar-card__weekday {
  margin: 0;
  font-size: calc(1.88rem * var(--theme-font-scale, 1));
  line-height: 1.02;
  color: var(--ink);
  white-space: nowrap;
}

.calendar-card__weekday {
  font-size: calc(1.88rem * var(--theme-font-scale, 1));
}

.calendar-card__panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.55rem;
  min-height: 0;
  padding: 0.88rem 0.94rem 0.94rem;
  border-radius: var(--panel-radius);
  border: 2px solid var(--frame-stroke);
  background: var(--panel-background);
}

.calendar-card__panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.calendar-card__panel-title {
  margin: 0;
}

.calendar-card__panel-title {
  font-size: calc(0.9rem * var(--theme-font-scale, 1));
  color: var(--muted-ink);
}

.calendar-card__badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.calendar-card__badge {
  padding: 0.14rem 0.46rem;
  border-radius: 999px;
  font-size: calc(0.72rem * var(--theme-font-scale, 1));
  line-height: 1.2;
  color: var(--ink);
  border: 1.5px solid var(--frame-stroke);
  background: var(--badge-fill);
}

.calendar-card__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  column-gap: 0.18rem;
  row-gap: 0.1rem;
  min-height: 0;
  align-content: start;
}

.calendar-card__week-label {
  display: grid;
  place-items: center;
  padding-bottom: 0.14rem;
  font-size: calc(0.82rem * var(--theme-font-scale, 1));
  color: var(--ink);
}

.calendar-card__cell {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0.16rem 0 0.18rem;
  border-radius: 0.9rem;
  border: 1.5px solid transparent;
  color: var(--ink);
}

.calendar-card__cell-copy {
  display: grid;
  justify-items: center;
  gap: 0.04rem;
  min-width: 0;
}

.calendar-card__cell--today {
  border-color: var(--frame-stroke-strong);
}

.calendar-card__solar {
  font-size: calc(0.98rem * var(--theme-font-scale, 1));
  line-height: 1.05;
}

.calendar-card__sub {
  max-width: 100%;
  overflow: hidden;
  font-size: calc(0.84rem * var(--theme-font-scale, 1));
  line-height: 1;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-card__cell--muted {
  border-color: var(--frame-muted);
}
</style>