Linked month and day views

"use client";

import { useState } from "react";
import { Kloq, useIsClient, type CalEvent } from "kloq";
import { Bar, Nav } from "../parts";
import { monthEvents } from "./data";

export default function LinkedCalendarsExample() {
  const [date, setDate] = useState(() => new Date());
  const [events, setEvents] = useState<CalEvent[]>(() => monthEvents(new Date()));
  const isClient = useIsClient();

  const shared = {
    date,
    onDateChange: setDate,
    events,
    onEventsChange: setEvents,
    responsive: false,
    persistence: false,
    designMode: false,
    storage: false,
  } as const;

  return (
    <div className="@container flex flex-col">
      <Bar className="justify-between">
        <span>shared date</span>
        <span className="text-foreground tabular-nums">
          {isClient
            ? date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", year: "numeric" })
            : ""}
        </span>
        <span className="tabular-nums">{events.length} events</span>
      </Bar>
      {/* `useKloq()` inside `Nav` reads whichever `<Kloq>` it is rendered in */}
      <div className="grid @3xl:grid-cols-2">
        <div className="h-104 min-w-0 border-b @3xl:border-r @3xl:border-b-0">
          <Kloq view="month" {...shared}>
            <Kloq.Toolbar>
              <Nav />
            </Kloq.Toolbar>
          </Kloq>
        </div>
        <div className="h-104 min-w-0">
          <Kloq view="day" {...shared}>
            <Kloq.Toolbar>
              <Nav />
            </Kloq.Toolbar>
          </Kloq>
        </div>
      </div>
    </div>
  );
}

import { instantAt, resolveView, type CalEvent, type EventColor } from "kloq";

interface Plan {
  title: string;
  /** days from today, minutes from midnight, length in minutes */
  day: number;
  at: number;
  minutes: number;
  color: EventColor;
}

const h = (hours: number, minutes = 0) => hours * 60 + minutes;

const PLAN: Plan[] = [
  { title: "Board prep", day: -2, at: h(11), minutes: 120, color: "violet" },
  { title: "Standup", day: -1, at: h(9), minutes: 15, color: "blue" },
  { title: "Standup", day: 0, at: h(9), minutes: 15, color: "blue" },
  { title: "Sprint planning", day: 0, at: h(10), minutes: 60, color: "blue" },
  { title: "Lunch with Sam", day: 0, at: h(12, 30), minutes: 60, color: "emerald" },
  { title: "Design review", day: 0, at: h(15), minutes: 45, color: "violet" },
  { title: "Standup", day: 1, at: h(9), minutes: 15, color: "blue" },
  { title: "1:1 with Priya", day: 1, at: h(9, 30), minutes: 30, color: "blue" },
  { title: "Dentist", day: 2, at: h(8), minutes: 60, color: "rose" },
  { title: "Roadmap", day: 3, at: h(14), minutes: 90, color: "amber" },
  { title: "Offsite", day: 7, at: h(9), minutes: 480, color: "emerald" },
  { title: "Release", day: 9, at: h(16), minutes: 60, color: "amber" },
  { title: "Retro", day: 10, at: h(15), minutes: 45, color: "violet" },
];

/** A month of events around today, as plain timed `CalEvent`s. */
export function monthEvents(now: Date): CalEvent[] {
  const view = resolveView("month", 1, now);
  return PLAN.map((p, i) => ({
    id: `plan-${i}`,
    title: p.title,
    color: p.color,
    start: instantAt(view, view.todayIndex + p.day, p.at),
    end: instantAt(view, view.todayIndex + p.day, p.at + p.minutes),
  }));
}

"use client";

import type { ComponentProps } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { formatViewTitle, useIsClient, useKloq } from "kloq";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/** The strip an example hangs its controls and readouts on; same box as `Kloq.Toolbar`. */
export function Bar({
  edge = "bottom",
  className,
  ...props
}: ComponentProps<"div"> & { edge?: "top" | "bottom" }) {
  return (
    <div
      {...props}
      className={cn(
        "flex min-h-11 shrink-0 flex-wrap items-center gap-x-4 gap-y-2 px-4 py-2.5 font-mono text-xs text-muted-foreground",
        edge === "bottom" ? "border-b" : "border-t",
        className,
      )}
    />
  );
}

export function Dot({ live, className, ...props }: ComponentProps<"span"> & { live?: boolean }) {
  return (
    <span
      aria-hidden
      {...props}
      className={cn(
        "size-1.5 shrink-0 rounded-full",
        live ? "bg-brand motion-safe:animate-pulse" : "bg-border",
        className,
      )}
    />
  );
}

/** Previous / next / today for a calendar whose view is fixed. Must render inside `<Kloq>`. */
export function Nav({ locale }: { locale?: string }) {
  const k = useKloq();
  const isClient = useIsClient();
  return (
    <div className="flex min-w-0 items-center gap-1">
      <Button variant="ghost" size="icon-xs" aria-label="Previous" onClick={() => k.step(-1)}>
        <ChevronLeft />
      </Button>
      <Button variant="ghost" size="icon-xs" aria-label="Next" onClick={() => k.step(1)}>
        <ChevronRight />
      </Button>
      <Button variant="ghost" size="xs" className={cn(k.atToday && "text-muted-foreground")} onClick={k.goToday}>
        Today
      </Button>
      <span className="ms-1 truncate text-sm font-medium text-foreground tabular-nums sm:text-xs">
        {isClient ? formatViewTitle(k.view, locale, { short: k.narrow }) : null}
      </span>
    </div>
  );
}