{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "orchid-inbox",
  "title": "Orchid Inbox",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://ui.orchid.ai/r/orchid-theme.json",
    "https://ui.orchid.ai/r/z-avatar.json",
    "https://ui.orchid.ai/r/z-button.json",
    "https://ui.orchid.ai/r/z-provider-icon.json"
  ],
  "files": [
    {
      "path": "registry/ui/orchid/examples/orchid-inbox.tsx",
      "content": "\"use client\";\nimport { useState } from 'react';\nimport ZAvatar from \"../spectrum/atoms/z-avatar/z-avatar\";\nimport ZButton from \"../spectrum/atoms/z-button/z-button\";\nimport ZProviderIcon from \"../spectrum/atoms/z-provider-icon/z-provider-icon\";\nexport type OrchidInboxMessage = {\n    id: string;\n    sender: string;\n    subject: string;\n    excerpt: string;\n    time: string;\n    unread?: boolean;\n};\nexport default function OrchidInbox({ messages, onOpen, onArchive, }: {\n    messages: OrchidInboxMessage[];\n    onOpen?: (message: OrchidInboxMessage) => void;\n    onArchive?: (message: OrchidInboxMessage) => void;\n}) {\n    const [query, setQuery] = useState('');\n    const [archived, setArchived] = useState<string[]>([]);\n    const visible = messages.filter((message) => !archived.includes(message.id) &&\n        `${message.sender} ${message.subject}`.toLowerCase().includes(query.toLowerCase()));\n    return (<section className=\"bg-surface text-neutral border-neutral mx-auto w-full overflow-hidden rounded-2xl border shadow-sm\" aria-label=\"Inbox messages\">\n      <div className=\"border-neutral flex flex-wrap items-center justify-between gap-4 border-b p-5\">\n        <div>\n          <h3 className=\"text-copy flex items-center gap-2 font-medium\">\n            <ZProviderIcon provider=\"gmail\"/> Inbox{' '}\n            <span className=\"text-neutral-subtle\">{messages.length - archived.length}</span>\n          </h3>\n          <p className=\"text-copy-sm text-neutral-subtle mt-1\">A clear view of what matters.</p>\n        </div>\n        <input aria-label=\"Search messages\" placeholder=\"Search messages…\" value={query} onChange={(event) => setQuery(event.target.value)} className=\"bg-surface-weak border-neutral text-copy w-full rounded-lg border px-3 py-2 outline-none focus-visible:ring-2 sm:w-48\"/>\n      </div>\n      {visible.map((message) => (<div className=\"border-neutral group flex items-center gap-2 border-b px-3 py-2 last:border-0\" key={message.id}>\n          <button type=\"button\" className=\"hover:bg-surface-weak flex min-w-0 flex-1 cursor-pointer items-start gap-3 rounded-lg p-2 text-left\" onClick={() => onOpen?.(message)} disabled={!onOpen}>\n            <ZAvatar fallback={message.sender} size=\"md\"/>\n            <span className=\"min-w-0 flex-1\">\n              <span className=\"text-copy flex items-center justify-between gap-3 font-medium\">\n                <span className=\"truncate\">{message.sender}</span>\n                <span className=\"text-copy-xs text-neutral-subtle shrink-0 font-normal\">\n                  {message.time}\n                </span>\n              </span>\n              <span className=\"text-copy mt-0.5 block truncate\">\n                {message.unread && (<span className=\"bg-accent mr-1.5 inline-block size-1.5 rounded-full\"/>)}\n                {message.subject}\n              </span>\n              <span className=\"text-copy-sm text-neutral-subtle mt-0.5 block truncate\">\n                {message.excerpt}\n              </span>\n            </span>\n          </button>\n          <ZButton size=\"sm\" disabled={!onArchive} onClick={() => {\n                setArchived((items) => [...items, message.id]);\n                onArchive?.(message);\n            }}>\n            Archive\n          </ZButton>\n        </div>))}\n      {!visible.length && (<p className=\"text-copy text-neutral-subtle p-12 text-center\">\n          {query ? 'No matching messages.' : 'All caught up.'}\n        </p>)}\n    </section>);\n}\n",
      "type": "registry:ui",
      "target": "@ui/orchid/examples/orchid-inbox.tsx"
    }
  ],
  "type": "registry:block"
}