Split view

"use client"

import * as React from "react"
import { SplitView } from "@/components/candor/split-view"

const messages = [
  { id: "m1", from: "Billing agent", subject: "Invoice 2041 is overdue", body: "The invoice for Acme is 12 days overdue. I drafted a reminder; it is waiting for you in Approvals." },
  { id: "m2", from: "Deploy agent", subject: "Storefront deployed to Staging", body: "Build 418 is on Staging. The smoke tests passed in 2 minutes 10 seconds." },
  { id: "m3", from: "Access agent", subject: "Sam asked for admin on Billing", body: "Sam asked for admin on Billing until Friday. Nothing changes until you approve." },
]

export default function Example() {
  const [open, setOpen] = React.useState<string | null>(null)
  const [narrow, setNarrow] = React.useState(false)
  const message = messages.find((m) => m.id === open)
  return (
    <div className="flex flex-col gap-3">
      <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
        <input type="checkbox" checked={narrow} onChange={(e) => setNarrow(e.target.checked)} />
        Phone width
      </label>
      <div className={narrow ? "h-80 w-80 overflow-hidden rounded-lg border" : "h-80 overflow-hidden rounded-lg border"}>
        <SplitView
          // Below `at` (720 by default) one pane shows at a time; this preview is narrower, so it's set lower.
          at={480}
          listWidth={240}
          listLabel="Inbox"
          detailLabel="Message"
          // Back clears what's open; the list comes back where the person left it.
          onBack={() => setOpen(null)}
          // The id of what is open: the detail arrives when it changes.
          detailKey={open}
          list={
            <ul className="flex flex-col p-1">
              {messages.map((m) => (
                <li key={m.id}>
                  <button
                    type="button"
                    aria-current={m.id === open ? "true" : undefined}
                    onClick={() => setOpen(m.id)}
                    className="flex w-full flex-col items-start rounded-md px-2 py-1.5 text-start text-sm hover:bg-accent aria-[current]:bg-accent"
                  >
                    <span className="font-medium">{m.subject}</span>
                    <span className="text-xs text-muted-foreground">{m.from}</span>
                  </button>
                </li>
              ))}
            </ul>
          }
          detail={
            message ? (
              <article className="flex flex-col gap-2 p-4 text-sm">
                <h3 className="font-semibold">{message.subject}</h3>
                <p className="text-xs text-muted-foreground">From {message.from}</p>
                <p>{message.body}</p>
              </article>
            ) : null
          }
        />
      </div>
    </div>
  )
}