スケジュールグリッドScheduleGridBeta

import * as React from "react";
import {
  Button,
  Input,
  ScheduleGrid,
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  type ScheduleAxisItem,
  type ScheduleCell,
} from "@gunjo/ui";

const rows: ScheduleAxisItem[] = [
  { id: "p1", label: "1限", sublabel: "8:50", ariaLabel: "1限" },
  { id: "p2", label: "2限", sublabel: "9:50", ariaLabel: "2限" },
  { id: "p3", label: "3限", sublabel: "10:50", ariaLabel: "3限" },
];
const columns: ScheduleAxisItem[] = [
  { id: "mon", label: "月", ariaLabel: "月曜" },
  { id: "tue", label: "火", ariaLabel: "火曜" },
  { id: "wed", label: "水", ariaLabel: "水曜" },
];

export function WeeklyTimetable() {
  const rootRef = React.useRef<HTMLDivElement | null>(null);
  const [portalContainer, setPortalContainer] = React.useState<HTMLElement | null>(null);
  const [selected, setSelected] = React.useState<"math" | "english" | "conflict" | "science" | "open" | null>(null);
  const [isLargeViewport, setIsLargeViewport] = React.useState(false);

  React.useEffect(() => {
    setPortalContainer(rootRef.current?.closest<HTMLElement>("[data-doc-component-preview-surface]") ?? rootRef.current);
  }, []);
  React.useEffect(() => {
    const node = rootRef.current;
    if (!node) return;

    const update = () => {
      const surface = node.parentElement ?? node;
      setIsLargeViewport(surface.getBoundingClientRect().width >= 900);
    };
    update();

    if (typeof ResizeObserver === "undefined") {
      window.addEventListener("resize", update);
      return () => window.removeEventListener("resize", update);
    }

    const observer = new ResizeObserver(update);
    observer.observe(node);
    return () => observer.disconnect();
  }, []);

  const cells: ScheduleCell[] = [
    { rowId: "p1", colId: "mon", content: <span>数学 / 佐藤</span>, description: "数学、佐藤、2-A", onSelect: () => setSelected("math") },
    { rowId: "p1", colId: "tue", tone: "info", content: <span>英語 / 田中</span>, description: "英語、田中、3-B", onSelect: () => setSelected("english") },
    { rowId: "p1", colId: "wed", tone: "muted", content: <span>空き / 授業を追加</span>, description: "空き、授業を追加できます", onSelect: () => setSelected("open") },
    { rowId: "p2", colId: "mon", unavailable: true, unavailableReason: "全校集会のため、この時限には授業を登録できません。" },
    { rowId: "p2", colId: "tue", tone: "destructive", content: <span>数学 / 競合</span>, description: "数学、競合あり", onSelect: () => setSelected("conflict") },
    { rowId: "p3", colId: "wed", tone: "success", content: <span>理科 / 山本</span>, description: "理科、山本、実験室", onSelect: () => setSelected("science") },
  ];

  return (
    <div ref={rootRef} className="relative flex w-full max-w-3xl flex-col gap-3 overflow-hidden rounded-lg border bg-card p-4">
      <ScheduleGrid label="2年A組 週間時間割" cornerLabel="時限" rows={rows} columns={columns} cells={cells} emptyLabel="空き" unavailableLabel="利用不可" />
      <Sheet modal={false} open={selected != null} onOpenChange={(open) => !open && setSelected(null)}>
        <SheetContent side={isLargeViewport ? "right" : "bottom"} portalContainer={portalContainer} className="overflow-y-auto p-4">
          <SheetHeader className="pr-8">
            <SheetTitle>{selected === "open" ? "授業を追加" : "予定の詳細"}</SheetTitle>
            <SheetDescription>{selected === "open" ? "この空き枠に登録する授業を入力します。" : "選択した授業の担当と教室を確認します。"}</SheetDescription>
          </SheetHeader>
          {selected === "open" ? (
            <div className="grid gap-4">
              <Input placeholder="例: 国語" />
              <Input placeholder="例: 鈴木 / 1-A" />
              <Button type="button" size="sm">授業を追加</Button>
            </div>
          ) : (
            <div className="grid gap-3 text-sm">
              <p className="font-semibold">数学 / 佐藤</p>
              <p className="text-muted-foreground">2-A</p>
              <Button type="button" size="sm">予定を編集</Button>
            </div>
          )}
        </SheetContent>
      </Sheet>
    </div>
  );
}