Calendar Schedule

"use client";
import * as React from "react";
import { cn } from "../ui/utils";
import { Calendar } from "../ui/calendar";
export function CalendarSchedule({ className }: { className?: string }) {
  const [date, setDate] = React.useState("2026-09-08");
  return (
    <div
      className={cn(
        "flex flex-wrap gap-8 rounded-xl border border-border p-5",
        className,
      )}
    >
      <Calendar value={date} onValueChange={setDate} />
      <section className="min-w-48 flex-1">
        <p className="mb-1 text-xs text-muted-foreground">Your schedule</p>
        <h3 className="mb-5 text-lg font-semibold">
          {new Date(date + "T12:00:00").toLocaleDateString("en-GB", {
            weekday: "long",
            day: "numeric",
            month: "long",
          })}
        </h3>
        {date === "2026-09-08" ? (
          <ol className="grid gap-4">
            {[
              "09:30 · Design review",
              "11:00 · Focus time",
              "14:00 · Project catch-up",
            ].map((e) => (
              <li
                key={e}
                className="rounded-r-lg border-l-2 border-primary bg-primary/5 p-4 text-sm"
              >
                {e}
              </li>
            ))}
          </ol>
        ) : (
          <p className="text-sm text-muted-foreground">
            Nothing scheduled for this day.
          </p>
        )}
      </section>
    </div>
  );
}

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
  return twMerge(clsx(values));
}

"use client";
import * as React from "react";
import { cn } from "./utils";
import { Button } from "./button";
import { useControllable } from "./use-controllable";
export function dateKey(d: Date) {
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
}
export function Calendar({
  value,
  defaultValue = "",
  onValueChange,
  className,
  min,
  max,
}: {
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  className?: string;
  min?: string;
  max?: string;
}) {
  const [selected, setSelected] = useControllable(
    value,
    defaultValue,
    onValueChange,
  );
  const [month, setMonth] = React.useState(() =>
    selected ? new Date(selected + "T12:00:00") : new Date(),
  );
  const y = month.getFullYear(),
    m = month.getMonth(),
    days = new Date(y, m + 1, 0).getDate(),
    offset = (new Date(y, m, 1).getDay() + 6) % 7;
  const refs = React.useRef<(HTMLButtonElement | null)[]>([]);
  return (
    <div className={cn("w-72 max-w-full rounded-xl border border-border p-4", className)}>
      <div className="mb-4 flex items-center justify-between">
        <Button
          variant="ghost"
          aria-label="Previous month"
          onClick={() => setMonth(new Date(y, m - 1, 1))}
        >
          ←
        </Button>
        <span aria-live="polite" className="text-sm font-medium">
          {month.toLocaleDateString("en-GB", {
            month: "long",
            year: "numeric",
          })}
        </span>
        <Button
          variant="ghost"
          aria-label="Next month"
          onClick={() => setMonth(new Date(y, m + 1, 1))}
        >
          →
        </Button>
      </div>
      <div className="grid grid-cols-7 gap-1">
        {["M", "T", "W", "T", "F", "S", "S"].map((d, i) => (
          <span
            key={i}
            aria-hidden="true"
            className="py-1 text-center text-xs text-muted-foreground"
          >
            {d}
          </span>
        ))}
        {Array.from({ length: offset }, (_, i) => (
          <span key={"s" + i} />
        ))}
        {Array.from({ length: days }, (_, i) => {
          const key = dateKey(new Date(y, m, i + 1));
          return (
            <button
              key={key}
              ref={(el) => {
                refs.current[i] = el;
              }}
              aria-label={new Date(y, m, i + 1).toLocaleDateString("en-GB", {
                dateStyle: "full",
              })}
              aria-pressed={selected === key}
              disabled={!!((min && key < min) || (max && key > max))}
              onClick={() => setSelected(key)}
              onKeyDown={(e) => {
                const delta = (
                  {
                    ArrowLeft: -1,
                    ArrowRight: 1,
                    ArrowUp: -7,
                    ArrowDown: 7,
                  } as Record<string, number>
                )[e.key];
                if (delta) {
                  e.preventDefault();
                  refs.current[
                    Math.min(days - 1, Math.max(0, i + delta))
                  ]?.focus();
                }
              }}
              className={cn(
                "size-8 max-w-full rounded-lg text-sm hover:bg-muted disabled:opacity-30",
                selected === key && "bg-primary text-primary-foreground",
              )}
            >
              {i + 1}
            </button>
          );
        })}
      </div>
    </div>
  );
}

"use client";
import * as React from "react";
import { Slot } from "radix-ui";
import { LoaderCircle } from "lucide-react";
import { cn } from "./utils";
export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
  size?: "sm" | "md" | "lg";
  loading?: boolean;
  asChild?: boolean;
};
export function Button({
  variant = "primary",
  size = "md",
  loading,
  asChild,
  className,
  children,
  disabled,
  ...props
}: ButtonProps) {
  const Comp = asChild ? Slot.Root : "button";
  return (
    <Comp
      type={asChild ? undefined : "button"}
      disabled={asChild ? undefined : disabled || loading}
      aria-disabled={disabled || loading || undefined}
      aria-busy={loading || undefined}
      className={cn(
        "relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-transparent text-sm font-medium leading-none transition-[background-color,border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:scale-[.98] disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none [&_svg]:shrink-0",
        {
          "bg-primary text-primary-foreground shadow-[inset_0_1px_0_#ffffff26,0_1px_2px_#00000012] hover:bg-primary/90":
            variant === "primary",
          "border-border/60 bg-muted text-foreground hover:bg-muted/70":
            variant === "secondary",
          "border-border bg-background text-foreground shadow-sm hover:bg-muted/60":
            variant === "outline",
          "text-muted-foreground hover:bg-muted hover:text-foreground":
            variant === "ghost",
          "bg-danger text-danger-foreground hover:bg-danger/90":
            variant === "danger",
        },
        {
          "h-8 px-3 text-xs": size === "sm",
          "h-10 px-4": size === "md",
          "h-12 px-6": size === "lg",
        },
        className,
      )}
      {...props}
    >
      {asChild ? (
        children
      ) : (
        <>
          <span
            className={cn(
              "inline-flex min-w-0 flex-1 items-center justify-center gap-2",
              loading && "invisible",
            )}
          >
            {children}
          </span>
          {loading && (
            <LoaderCircle
              aria-hidden="true"
              className="absolute size-4 animate-spin motion-reduce:animate-none"
            />
          )}
        </>
      )}
    </Comp>
  );
}

"use client";
import { useState } from "react";
export function useControllable<T>(
  value: T | undefined,
  initial: T,
  onChange?: (value: T) => void,
) {
  const [local, setLocal] = useState(initial);
  return [
    value === undefined ? local : value,
    (next: T) => {
      if (value === undefined) setLocal(next);
      onChange?.(next);
    },
  ] as const;
}