Calendar

import { useState } from "react";
import { Calendar } from "cennge-ui";

// The value has no time zone: format it in UTC, or the day can shift.
const fullDate = new Intl.DateTimeFormat("en-US", { dateStyle: "full", timeZone: "UTC" });

export default function ReleaseDate() {
  const [date, setDate] = useState<string | null>(null);

  return (
    <div className="flex flex-col gap-3">
      <Calendar aria-label="Release date" value={date} onValueChange={setDate} />
      <p className="text-sm text-muted">
        {date ? `payload-cache 1.4.0: ${fullDate.format(new Date(`${date}T00:00:00Z`))}` : "No release date yet"}
      </p>
    </div>
  );
}

import { useState } from "react";
import { RangeCalendar, type DateRange } from "cennge-ui";

const DAY = 24 * 60 * 60 * 1000;
const utc = (iso: string) => Date.parse(`${iso}T00:00:00Z`);
const days = ({ start, end }: DateRange) => (utc(end) - utc(start)) / DAY + 1;

export default function BetaPeriod() {
  const [beta, setBeta] = useState<DateRange | null>(null);

  return (
    <div className="flex flex-col gap-3">
      <RangeCalendar
        aria-label="Beta period"
        visibleMonths={2}
        defaultFocusedValue="2026-11-01"
        value={beta}
        onValueChange={setBeta}
      />
      <p className="text-sm text-muted">
        {beta
          ? `ai-niche-scout beta: ${beta.start} to ${beta.end}, ${days(beta)} days`
          : "Pick the first and the last day"}
      </p>
    </div>
  );
}

import { useEffect, useState } from "react";
import { Calendar } from "cennge-ui";

const toIso = (date: Date) =>
  `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;

const isWeekend = (iso: string) => {
  const day = new Date(`${iso}T00:00:00Z`).getUTCDay();
  return day === 0 || day === 6;
};

export default function DeployDay() {
  // Today is the browser's, so it is read after mount; until then null means no limit.
  const [limits, setLimits] = useState<{ min: string; max: string } | null>(null);
  useEffect(() => {
    const now = new Date();
    const inFourWeeks = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 28);
    setLimits({ min: toIso(now), max: toIso(inFourWeeks) });
  }, []);

  return (
    <Calendar
      aria-label="Deploy day"
      minValue={limits?.min ?? null}
      maxValue={limits?.max ?? null}
      isDateUnavailable={isWeekend}
    />
  );
}

import { Calendar, CenngeProvider } from "cennge-ui";

export default function GermanCalendar() {
  return (
    // Month and weekday names and the first day of the week come from Intl for this locale.
    <CenngeProvider locale="de-DE">
      <Calendar
        aria-label="Veröffentlichung"
        defaultValue="2026-12-03"
        labels={{ previousMonth: "Vorheriger Monat", nextMonth: "Nächster Monat", month: "Monat", year: "Jahr" }}
      />
    </CenngeProvider>
  );
}