{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "support-container",
  "title": "Support Container",
  "author": "AlgorizeTech",
  "description": "A support ticket list with filters, detail view and empty state, configured through one content object. Use it to drop a help-desk view into an existing layout.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/components/custom/blocks/SupportContainer.tsx",
      "content": "\"use client\";\n\nimport {\n  ChevronDown,\n  Clock,\n  Inbox,\n  LifeBuoy,\n  List,\n  Mail,\n  MessageSquare,\n  User,\n} from \"lucide-react\";\nimport { useState } from \"react\";\n\n// ==========================================\n// MASTER DYNAMIC DATA CONFIGURATION\n// Everything visible on the screen comes from here\n// ==========================================\nconst DASHBOARD_DATA = {\n  // 1. Header Information\n  header: {\n    title: \"Sales Tickets\",\n    subtitle: \"All Open\",\n  },\n\n  // 2. Filter Buttons\n  filters: [\n    { id: \"status\", label: \"Open\", count: 99, icon: Inbox },\n    { id: \"sort\", label: \"Newest\", count: null, icon: Clock },\n  ],\n\n  // 3. Right Sidebar Empty State\n  emptyState: {\n    greetingPrefix: \"Hey\",\n    userName: \"Rakib\",\n    message: \"Time to help the people who need us most\",\n  },\n\n  // 4. Ticket Detail View Strings\n  detailView: {\n    openedPrefix: \"Opened\",\n    replyPlaceholder: \"Type your reply here...\",\n    sendButtonText: \"Send Reply\",\n  },\n\n  // 5. Dynamic Ticket List\n  tickets: [\n    {\n      id: \"#6493\",\n      title: \"THW - New email template creation\",\n      author: \"Darren Adams\",\n      company: \"Headboard Workshop\",\n      initials: \"DA\",\n      status: \"open\",\n      time: \"10m ago\",\n      message:\n        \"Hi team, we need a new email template for our upcoming winter campaign. Can we schedule a quick call to discuss the requirements?\",\n    },\n    {\n      id: \"#6494\",\n      title: \"Billing issue with Pro plan upgrade\",\n      author: \"Sarah Jenkins\",\n      company: \"TechFlow Inc.\",\n      initials: \"SJ\",\n      status: \"open\",\n      time: \"1h ago\",\n      message:\n        \"I tried upgrading to the Pro plan this morning, but my card was charged twice. Please refund the duplicate charge immediately.\",\n    },\n    {\n      id: \"#6495\",\n      title: \"Feature request: Dark mode dashboard\",\n      author: \"Mike Ross\",\n      company: \"Pearson Specter\",\n      initials: \"MR\",\n      status: \"pending\",\n      time: \"3h ago\",\n      message:\n        \"Is there any timeline for when dark mode will be available? Our team works late and the bright white interface is causing eye strain.\",\n    },\n    {\n      id: \"#6496\",\n      title: \"Cannot access API keys\",\n      author: \"Elena Rodriguez\",\n      company: \"DataSync\",\n      initials: \"ER\",\n      status: \"open\",\n      time: \"5h ago\",\n      message:\n        \"Whenever I navigate to the developer settings, the page crashes and I get a 500 error. I need to rotate my API keys urgently.\",\n    },\n  ],\n};\n\n// ==========================================\n// COMPONENT\n// ==========================================\nexport default function SupportContainer() {\n  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);\n\n  // Find the currently selected ticket data dynamically\n  const selectedTicket = DASHBOARD_DATA.tickets.find(\n    (t) => t.id === selectedTicketId,\n  );\n\n  return (\n    <div className=\"min-h-screen font-sans bg-background pt-10 transition-colors duration-200\">\n      <main className=\"pb-10 px-4 md:px-8 max-w-[1600px] mx-auto h-[90vh] flex flex-col\">\n        <div className=\"bg-card border border-border rounded-lg shadow-sm flex flex-col flex-1 overflow-hidden transition-colors\">\n          {/* ==========================================\n              DYNAMIC HEADER\n              ========================================== */}\n          <div className=\"flex items-center gap-3 p-4 border-b border-border bg-card shrink-0 transition-colors\">\n            <List className=\"w-5 h-5 text-primary\" />\n            <h2 className=\"text-base font-medium text-foreground\">\n              {DASHBOARD_DATA.header.title}:{\" \"}\n              <span className=\"text-muted-foreground font-normal\">\n                {DASHBOARD_DATA.header.subtitle}\n              </span>\n            </h2>\n          </div>\n\n          <div className=\"flex flex-col md:flex-row flex-1 overflow-hidden\">\n            {/* ==========================================\n                LEFT COLUMN: DYNAMIC TICKET LIST\n                ========================================== */}\n            <div className=\"w-full md:w-[35%] lg:w-[30%] flex flex-col border-r border-border bg-card shrink-0 transition-colors\">\n              {/* Dynamic Filters */}\n              <div className=\"flex items-center border-b border-border bg-card divide-x divide-border overflow-x-auto custom-scrollbar shrink-0 transition-colors\">\n                {DASHBOARD_DATA.filters.map((filter) => {\n                  const Icon = filter.icon;\n                  return (\n                    <button\n                      key={filter.id}\n                      className=\"flex items-center gap-2 px-4 py-3 text-sm text-foreground/80 hover:bg-muted whitespace-nowrap transition-colors flex-1 justify-center\"\n                    >\n                      <Icon className=\"w-4 h-4 text-muted-foreground\" />\n                      {filter.label}{\" \"}\n                      {filter.count !== null && `(${filter.count})`}\n                      <ChevronDown className=\"w-3 h-3 ml-1 opacity-70\" />\n                    </button>\n                  );\n                })}\n              </div>\n\n              {/* Dynamic Tickets */}\n              <div className=\"flex-1 overflow-y-auto custom-scrollbar\">\n                {DASHBOARD_DATA.tickets.map((ticket) => {\n                  const isActive = selectedTicketId === ticket.id;\n\n                  return (\n                    <div\n                      key={ticket.id}\n                      onClick={() => setSelectedTicketId(ticket.id)}\n                      className={`flex items-start p-4 border-b border-border cursor-pointer transition-colors ${\n                        isActive\n                          ? \"bg-primary/10 border-l-4 border-l-primary\"\n                          : \"hover:bg-muted border-l-4 border-l-transparent\"\n                      }`}\n                    >\n                      <div className=\"w-10 h-10 rounded bg-primary text-primary-foreground flex items-center justify-center font-semibold mr-3 shrink-0 mt-1\">\n                        {ticket.initials}\n                      </div>\n                      <div className=\"flex-1 min-w-0\">\n                        <div className=\"flex justify-between items-start mb-1\">\n                          <div\n                            className={`text-sm truncate pr-2 ${\n                              isActive\n                                ? \"font-semibold text-primary\"\n                                : \"font-medium text-foreground\"\n                            }`}\n                          >\n                            {ticket.title}\n                          </div>\n                          <span className=\"text-xs text-muted-foreground shrink-0 mt-0.5\">\n                            {ticket.time}\n                          </span>\n                        </div>\n                        <div className=\"text-xs text-primary font-medium mb-1 truncate\">\n                          {ticket.id}\n                        </div>\n                        <div className=\"text-xs text-muted-foreground truncate\">\n                          {ticket.author} • {ticket.company}\n                        </div>\n                      </div>\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n\n            {/* ==========================================\n                RIGHT COLUMN: DYNAMIC DETAILS OR EMPTY STATE\n                ========================================== */}\n            <div className=\"hidden md:flex flex-col flex-1 bg-muted relative overflow-hidden transition-colors\">\n              {!selectedTicket ? (\n                /* Dynamic Empty State */\n                <div className=\"flex-1 flex flex-col items-center justify-center p-8 text-center\">\n                  <div className=\"max-w-md flex flex-col items-center\">\n                    <div className=\"w-24 h-24 bg-card rounded-full flex items-center justify-center shadow-sm mb-6 text-primary transition-colors\">\n                      <LifeBuoy className=\"w-12 h-12\" strokeWidth={1.5} />\n                    </div>\n                    <h2 className=\"text-3xl font-normal text-foreground mb-3\">\n                      {DASHBOARD_DATA.emptyState.greetingPrefix}{\" \"}\n                      {DASHBOARD_DATA.emptyState.userName}!\n                    </h2>\n                    <p className=\"text-lg text-muted-foreground italic\">\n                      {DASHBOARD_DATA.emptyState.message}\n                    </p>\n                  </div>\n                </div>\n              ) : (\n                /* Dynamic Ticket Details */\n                <div className=\"flex-1 flex flex-col h-full overflow-hidden animate-in fade-in duration-300\">\n                  <div className=\"bg-card p-6 border-b border-border shrink-0 transition-colors\">\n                    <div className=\"flex justify-between items-start mb-4\">\n                      <h2 className=\"text-xl font-semibold text-foreground leading-tight\">\n                        {selectedTicket.title}\n                      </h2>\n                      <span className=\"px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full border border-primary/30\">\n                        {selectedTicket.id}\n                      </span>\n                    </div>\n\n                    <div className=\"flex items-center gap-4 text-sm text-muted-foreground\">\n                      <div className=\"flex items-center gap-1.5\">\n                        <User className=\"w-4 h-4\" />\n                        <span>{selectedTicket.author}</span>\n                      </div>\n                      <div className=\"w-1 h-1 bg-muted rounded-full\" />\n                      <div className=\"flex items-center gap-1.5\">\n                        <LifeBuoy className=\"w-4 h-4\" />\n                        <span>{selectedTicket.company}</span>\n                      </div>\n                      <div className=\"w-1 h-1 bg-muted rounded-full\" />\n                      <div className=\"flex items-center gap-1.5\">\n                        <Clock className=\"w-4 h-4\" />\n                        <span>\n                          {DASHBOARD_DATA.detailView.openedPrefix}{\" \"}\n                          {selectedTicket.time}\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n\n                  <div className=\"flex-1 p-6 overflow-y-auto custom-scrollbar\">\n                    <div className=\"flex gap-4 mb-6\">\n                      <div className=\"w-10 h-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-semibold shrink-0\">\n                        {selectedTicket.initials}\n                      </div>\n                      <div className=\"bg-card p-4 rounded-xl rounded-tl-none shadow-sm border border-border max-w-3xl transition-colors\">\n                        <p className=\"text-card-foreground text-sm leading-relaxed whitespace-pre-wrap\">\n                          {selectedTicket.message}\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n\n                  <div className=\"bg-card p-4 border-t border-border shrink-0 transition-colors\">\n                    <div className=\"border border-border rounded-lg overflow-hidden focus-within:border-primary focus-within:ring-1 focus-within:ring-primary transition-shadow bg-transparent\">\n                      <textarea\n                        className=\"w-full p-3 h-24 text-sm outline-none resize-none bg-transparent text-foreground placeholder:text-muted-foreground\"\n                        placeholder={DASHBOARD_DATA.detailView.replyPlaceholder}\n                      />\n                      <div className=\"bg-muted p-2 flex justify-between items-center border-t border-border transition-colors\">\n                        <div className=\"flex gap-2\">\n                          <button className=\"p-2 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded transition-colors\">\n                            <MessageSquare className=\"w-4 h-4\" />\n                          </button>\n                          <button className=\"p-2 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded transition-colors\">\n                            <Mail className=\"w-4 h-4\" />\n                          </button>\n                        </div>\n                        <button className=\"px-6 py-2 bg-primary hover:bg-primary/90 text-primary-foreground text-sm font-medium rounded transition-colors\">\n                          {DASHBOARD_DATA.detailView.sendButtonText}\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </main>\n\n      <style\n        dangerouslySetInnerHTML={{\n          __html: `\n        .custom-scrollbar::-webkit-scrollbar {\n          height: 6px;\n          width: 6px;\n        }\n        .custom-scrollbar::-webkit-scrollbar-track {\n          background: transparent;\n        }\n        .custom-scrollbar::-webkit-scrollbar-thumb {\n          background-color: var(--border);\n          border-radius: 10px;\n        }\n        .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n          background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);\n        }\n      `,\n        }}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/custom/blocks/SupportContainer.tsx"
    }
  ],
  "docs": "Named export: SupportContainer. Configured via a single nested prop object covering header, filters, tickets, emptyState and detailView — all copy is passed in, so it localises without edits. Installs standalone with no registry dependencies.",
  "categories": [
    "communication",
    "layout"
  ],
  "type": "registry:component"
}