Daily Activity Calendar

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
"use client";
 
import { forwardRef, type ComponentPropsWithoutRef } from "react";
 
import { cn } from "@/lib/cn";
import { Clock } from "lucide-react";
 
/** Monthly activity calendar — highlight active days and a selected date. */
const WEEKDAY_HEADERS = [
  { id: "sun", label: "S" },
  { id: "mon", label: "M" },
  { id: "tue", label: "T" },
  { id: "wed", label: "W" },
  { id: "thu", label: "T" },
  { id: "fri", label: "F" },
  { id: "sat", label: "S" },
] as const;
 
// Empty cells before the 1st — grid slots 0..3 when the month starts on a Friday
const MONTH_START_EMPTY_SLOTS = [0, 1, 2, 3] as const;
 
// month, year — header label; activeDays — emerald dots; highlightDay — orange selected day
export type DailyActivityCalendarWidgetProps = Readonly<
  {
    month?: string;
    year?: number;
    activeDays?: number[];
    highlightDay?: number;
  } & ComponentPropsWithoutRef<"div">
>;
 
export const DailyActivityCalendarWidget = forwardRef<
  HTMLDivElement,
  DailyActivityCalendarWidgetProps
>(
  (
    {
      className,
      month = "August 2024",
      year = 2024,
      activeDays = [2, 3, 4, 5, 6, 7],
      highlightDay = 8,
      ...props
    },
    ref,
  ) => {
    const daysInMonth = 31;
 
    return (
      <div
        ref={ref}
        data-slot="daily-activity-calendar-widget"
        data-year={year}
        className={cn(
          "flex h-44 w-44 flex-col overflow-hidden rounded-3xl bg-neutral-900 p-3 font-sans text-white shadow-lg",
          className,
        )}
        {...props}
      >
        <div className="mb-3 flex items-center justify-between">
          <p className="text-sm font-semibold">Daily Activity</p>
          <Clock size={14} className="text-neutral-400" />
        </div>
 
        <div className="mb-2 flex items-center justify-between">
          <span className="rounded-full bg-neutral-700 px-2 py-0.5 text-[9px]">
            Nov
          </span>
          <span className="text-[10px] text-neutral-400">{month}</span>
        </div>
 
        <div className="mb-1 grid grid-cols-7 gap-0.5 text-center text-[8px] text-neutral-500">
          {WEEKDAY_HEADERS.map(({ id, label }) => (
            <span key={id}>{label}</span>
          ))}
        </div>
 
        <div className="grid grid-cols-7 gap-0.5 text-center">
          {MONTH_START_EMPTY_SLOTS.map((slot) => (
            <span key={`start-${slot}`} />
          ))}
          {Array.from(
            { length: daysInMonth },
            (_, dayIndex) => dayIndex + 1,
          ).map((day) => {
            const isActive = activeDays.includes(day);
            const isHighlight = day === highlightDay;
            const isIdle = !isActive && !isHighlight;
 
            return (
              <span
                key={day}
                className={cn(
                  "flex h-5 w-5 items-center justify-center rounded-full text-[9px] transition-all duration-200 ease-out",
                  isActive && "scale-100 bg-emerald-500 font-semibold text-white",
                  isHighlight && "scale-100 bg-orange-500 font-semibold text-white",
                  isIdle && "text-neutral-400",
                )}
              >
                {day}
              </span>
            );
          })}
        </div>
      </div>
    );
  },
);
 
DailyActivityCalendarWidget.displayName = "DailyActivityCalendarWidget";