リストカードListCardBeta

import * as React from "react";
import { Badge, LineChip, ListCard, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@gunjo/ui";

export function RouteResults() {
  const rootRef = React.useRef<HTMLDivElement | null>(null);
  const [portalContainer, setPortalContainer] = React.useState<HTMLElement | null>(null);
  const [selectedId, setSelectedId] = React.useState<"incident" | "route-1" | null>(null);
  const [open, setOpen] = React.useState(false);
  const [isLargeViewport, setIsLargeViewport] = React.useState(false);

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

  React.useEffect(() => {
    const media = window.matchMedia("(min-width: 1024px)");
    const update = () => setIsLargeViewport(media.matches);
    update();
    media.addEventListener("change", update);
    return () => media.removeEventListener("change", update);
  }, []);

  const detail = selectedId === "incident"
    ? { title: "中央線快速", status: "運転見合わせ", summary: "人身事故の影響で上下線の運転を見合わせています。", variant: "destructive" as const }
    : { title: "10:42 → 11:14", status: "推奨経路", summary: "乗換なしで到着する最速・最安の経路です。", variant: "secondary" as const };

  const select = (id: "incident" | "route-1") => {
    setSelectedId(id);
    setOpen(true);
  };

  return (
    <div ref={rootRef} className="relative grid w-full max-w-2xl gap-4 overflow-hidden rounded-lg border bg-card p-4">
      <div className="grid content-start gap-3">
        <ListCard
          leading={<LineChip label="JC" color="#f15a24" />}
          title="中央線快速"
          description="人身事故の影響"
          status={<Badge variant="destructive">運転見合わせ</Badge>}
          meta="7:42 更新"
          severity="critical"
          selected={selectedId === "incident"}
          onSelect={() => select("incident")}
        />
        <ListCard
          title="10:42 → 11:14"
          description="32分・乗換0回・34.1km"
          tags={<><Badge variant="secondary">最速</Badge><Badge variant="secondary">最安</Badge></>}
          meta="¥580"
          selected={selectedId === "route-1"}
          onSelect={() => select("route-1")}
        />
      </div>
      <Sheet open={open && selectedId != null} onOpenChange={setOpen} modal={false}>
        <SheetContent
          side={isLargeViewport ? "right" : "bottom"}
          portalContainer={portalContainer}
          overlayClassName="rounded-md"
          closeLabel="閉じる"
          className={isLargeViewport ? "grid w-[300px] max-w-[calc(100%-2rem)] p-4" : "max-h-[72%] overflow-y-auto p-4"}
        >
          <SheetHeader>
            <SheetTitle>詳細</SheetTitle>
            <SheetDescription>{detail.title}</SheetDescription>
          </SheetHeader>
          <div className="grid content-start gap-3 rounded-lg border bg-card p-3">
            <p className="text-sm font-semibold text-foreground">{detail.title}</p>
            <Badge variant={detail.variant} className="w-fit">{detail.status}</Badge>
            <p className="text-sm leading-6 text-muted-foreground">{detail.summary}</p>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  );
}