{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mailbox-layout",
  "title": "Mailbox Layout",
  "description": "Email mailbox with folder sidebar, email list with checkboxes/stars, read view, and compose view.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/box.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-table.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-button.json"
  ],
  "files": [
    {
      "path": "registry/new-york/mailbox-layout/blocks/mailbox-layout.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\ninterface MailboxEmail {\n  id: string\n  from: string\n  subject: string\n  preview: string\n  time: string\n  read?: boolean\n  starred?: boolean\n  hasAttachment?: boolean\n  labels?: { text: string; color: string }[]\n}\n\ninterface MailboxFolder {\n  id: string\n  name: string\n  icon?: React.ReactNode\n  count?: number\n  active?: boolean\n}\n\ninterface MailboxLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  folders?: MailboxFolder[]\n  emails?: MailboxEmail[]\n  activeFolder?: string\n  onFolderClick?: (folderId: string) => void\n  onEmailClick?: (emailId: string) => void\n  onCompose?: () => void\n  selectedEmails?: string[]\n  onSelectEmail?: (emailId: string) => void\n  onSelectAll?: () => void\n  view?: \"inbox\" | \"read\" | \"compose\"\n  readContent?: React.ReactNode\n  composeContent?: React.ReactNode\n}\n\nfunction MailboxLayout({\n  className,\n  folders = [],\n  emails = [],\n  activeFolder,\n  onFolderClick,\n  onEmailClick,\n  onCompose,\n  selectedEmails = [],\n  onSelectEmail,\n  onSelectAll,\n  view = \"inbox\",\n  readContent,\n  composeContent,\n  ...props\n}: MailboxLayoutProps) {\n  return (\n    <div className={cn(\"flex gap-[15px] flex-col lg:flex-row\", className)} {...props}>\n      {/* Sidebar */}\n      <div className=\"w-full lg:w-[200px] flex-shrink-0\">\n        <button\n          type=\"button\"\n          className=\"w-full mb-[15px] px-[12px] py-[10px] bg-[#3c8dbc] border border-[#367fa9] text-white rounded-[3px] text-[14px] font-bold cursor-pointer hover:bg-[#367fa9]\"\n          onClick={onCompose}\n        >\n          Compose\n        </button>\n\n        <div className=\"bg-white shadow-[0_1px_1px_rgba(0,0,0,0.1)] rounded-[3px] p-[10px]\">\n          <ul className=\"list-none m-0 p-0\">\n            {folders.map((folder) => (\n              <li key={folder.id}>\n                <a\n                  className={cn(\n                    \"flex items-center gap-[8px] px-[10px] py-[8px] text-[14px] no-underline rounded-[3px] cursor-pointer\",\n                    folder.active || folder.id === activeFolder\n                      ? \"bg-[#3c8dbc] text-white\"\n                      : \"text-[#444] hover:bg-[#f4f4f4]\"\n                  )}\n                  onClick={() => onFolderClick?.(folder.id)}\n                >\n                  {folder.icon && <span>{folder.icon}</span>}\n                  <span className=\"flex-1\">{folder.name}</span>\n                  {folder.count !== undefined && folder.count > 0 && (\n                    <span className=\"text-[12px] opacity-70\">{folder.count}</span>\n                  )}\n                </a>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n\n      {/* Main */}\n      <div className=\"flex-1\">\n        <div className=\"bg-white shadow-[0_1px_1px_rgba(0,0,0,0.1)] rounded-[3px]\">\n          {view === \"inbox\" && (\n            <>\n              {/* Controls */}\n              <div className=\"p-[10px] border-b border-b-[#f4f4f4] flex items-center gap-[5px]\">\n                <label className=\"flex items-center cursor-pointer\">\n                  <input\n                    type=\"checkbox\"\n                    className=\"mr-[5px]\"\n                    onChange={() => onSelectAll?.()}\n                  />\n                </label>\n                <button className=\"px-[8px] py-[4px] bg-[#f4f4f4] border border-[#ddd] text-[12px] rounded-[3px] cursor-pointer hover:bg-[#e7e7e7]\">\n                  Delete\n                </button>\n                <button className=\"px-[8px] py-[4px] bg-[#f4f4f4] border border-[#ddd] text-[12px] rounded-[3px] cursor-pointer hover:bg-[#e7e7e7]\">\n                  Refresh\n                </button>\n              </div>\n\n              {/* Email list */}\n              <table className=\"w-full border-collapse\">\n                <tbody>\n                  {emails.map((email) => (\n                    <tr\n                      key={email.id}\n                      className={cn(\n                        \"cursor-pointer hover:bg-[#f5f5f5] border-b border-b-[#f4f4f4]\",\n                        !email.read && \"bg-[#f6f6f6] font-semibold\"\n                      )}\n                      onClick={() => onEmailClick?.(email.id)}\n                    >\n                      <td className=\"w-[30px] p-[8px] text-center\">\n                        <input\n                          type=\"checkbox\"\n                          checked={selectedEmails.includes(email.id)}\n                          onChange={(e) => {\n                            e.stopPropagation()\n                            onSelectEmail?.(email.id)\n                          }}\n                          onClick={(e) => e.stopPropagation()}\n                        />\n                      </td>\n                      <td className=\"w-[20px] p-[8px] text-center text-[14px] cursor-pointer\">\n                        {email.starred ? \"★\" : \"☆\"}\n                      </td>\n                      <td className=\"p-[8px] text-[14px] w-[150px] truncate\">{email.from}</td>\n                      <td className=\"p-[8px] text-[14px]\">\n                        <span>{email.subject}</span>\n                        <span className=\"text-[#999]\"> - {email.preview}</span>\n                        {email.labels?.map((l, i) => (\n                          <span\n                            key={i}\n                            className={cn(\n                              \"inline-block ml-[5px] px-[4px] py-[1px] text-[11px] text-white rounded-[2px]\",\n                              l.color\n                            )}\n                          >\n                            {l.text}\n                          </span>\n                        ))}\n                        {email.hasAttachment && <span className=\"ml-[5px]\">&#128206;</span>}\n                      </td>\n                      <td className=\"p-[8px] text-[12px] text-[#999] text-right w-[80px]\">{email.time}</td>\n                    </tr>\n                  ))}\n                </tbody>\n              </table>\n            </>\n          )}\n\n          {view === \"read\" && (\n            <div className=\"p-[15px]\">{readContent}</div>\n          )}\n\n          {view === \"compose\" && (\n            <div className=\"p-[15px]\">{composeContent}</div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport { MailboxLayout }\nexport type { MailboxLayoutProps, MailboxEmail, MailboxFolder }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}