右レールRightRailExperimental

import { Badge, RightRail } from "@gunjo/ui"

const pageLinks = [
  { id: "overview", label: "概要" },
  { id: "quality", label: "品質指標" },
  { id: "release", label: "公開前確認" },
]

const pageStatuses = [
  { label: "状態", value: "公開前確認", tone: "default" },
  { label: "最終更新", value: "5分前", tone: "secondary" },
  { label: "レビュー", value: "2件対応待ち", tone: "secondary" },
]

function PageLinks() {
  return (
    <section className="space-y-2">
      <h3 className="text-sm font-semibold">ページ内</h3>
      <nav aria-label="ページ内リンク">
        <ul className="space-y-1">
          {pageLinks.map((item) => (
            <li key={item.id}>
              <a className="block rounded-sm px-2 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground" href={`#${item.id}`}>
                {item.label}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    </section>
  )
}

function PageStatus() {
  return (
    <section className="space-y-2">
      <h3 className="text-sm font-semibold">ページステータス</h3>
      <dl className="space-y-2">
        {pageStatuses.map((item) => (
          <div key={item.label} className="flex items-center justify-between gap-3 rounded-md border bg-muted/20 px-3 py-2">
            <dt className="text-xs text-muted-foreground">{item.label}</dt>
            <dd className="shrink-0 text-xs font-medium">
              {item.tone === "default" ? <Badge>{item.value}</Badge> : item.value}
            </dd>
          </div>
        ))}
      </dl>
    </section>
  )
}

export function DesktopRightRail() {
  return (
    <div className="flex min-h-[360px] min-w-[680px] overflow-x-auto rounded-md border bg-background">
      <main className="min-w-0 flex-1 space-y-4 bg-muted/30 p-4" aria-label="主コンテンツ">
        <p className="max-w-xl text-sm text-muted-foreground">
          主コンテンツの右側に、参照用の補助情報を固定幅で並べます。
        </p>
      </main>

      <RightRail width="w-72" aria-label="右レールの補助情報">
        <div className="space-y-5 p-4">
          <PageLinks />
          <PageStatus />
        </div>
      </RightRail>
    </div>
  )
}