{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-04",
  "type": "registry:block",
  "title": "Sidebar Double-Sided Mail",
  "description": "A sidebar double-sided mail block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "avatar",
    "dropdown-menu",
    "sidebar"
  ],
  "dependencies": [
    "@tabler/icons-react",
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/sidebar/sidebar-04/nav-user.tsx",
      "type": "registry:component",
      "target": "components/sidebar-04/nav-user.tsx",
      "content": "'use client';\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-react';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/components/ui/sidebar';\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string;\n    email: string;\n    avatar: string;\n  };\n}) {\n  const { isMobile } = useSidebar();\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground md:h-8 md:p-0\"\n                size=\"lg\"\n              />\n            }\n          >\n            <Avatar className=\"h-8 w-8 rounded-lg\">\n              <AvatarImage alt={user.name} src={user.avatar} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <ChevronsUpDown className=\"ml-auto size-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            align=\"end\"\n            className=\"w-(--anchor-width) min-w-56 rounded-lg\"\n            side={isMobile ? 'bottom' : 'right'}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage alt={user.name} src={user.avatar} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  );\n}\n"
    },
    {
      "path": "content/components/sidebar/sidebar-04/app-sidebar.tsx",
      "type": "registry:component",
      "target": "components/sidebar-04/app-sidebar.tsx",
      "content": "'use client';\n\nimport {\n  IconBrandAmongUs,\n  IconCarambola,\n  IconHourglassHigh,\n  IconMailbox,\n} from '@tabler/icons-react';\nimport { Archive, Flag } from 'lucide-react';\nimport * as React from 'react';\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/components/ui/sidebar';\nimport { useMail } from '@/components/sidebar-04/mail-context';\nimport { NavUser } from '@/components/sidebar-04/nav-user';\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'ephraim',\n    email: 'ephraim@blocks.so',\n    avatar: '/avatar-01.png',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: IconMailbox,\n      isActive: true,\n    },\n    {\n      title: 'Starred',\n      url: '#',\n      icon: IconCarambola,\n      isActive: false,\n    },\n    {\n      title: 'Important',\n      url: '#',\n      icon: Flag,\n      isActive: false,\n    },\n    {\n      title: 'Scheduled',\n      url: '#',\n      icon: IconHourglassHigh,\n      isActive: false,\n    },\n    {\n      title: 'Archive',\n      url: '#',\n      icon: Archive,\n      isActive: false,\n    },\n  ],\n  labels: [\n    { title: 'Personal', color: 'bg-green-400 dark:bg-green-300' },\n    { title: 'Work', color: 'bg-blue-400 dark:bg-blue-300' },\n    { title: 'Travel', color: 'bg-orange-400 dark:bg-orange-300' },\n    { title: 'Receipts', color: 'bg-purple-400 dark:bg-purple-300' },\n  ],\n  mails: [\n    {\n      name: 'Nora Patel',\n      email: 'nora@acme.co',\n      subject: 'Welcome to Acme Mail',\n      date: '08:15 AM',\n      teaser:\n        \"Hi there — here's a quick tour of your new inbox.\\nPin, label, and schedule messages to stay organized.\",\n    },\n    {\n      name: 'Stripe',\n      email: 'no-reply@stripe.com',\n      subject: 'Your payout has arrived',\n      date: 'Yesterday',\n      teaser:\n        'A payout of $3,245.90 was sent to your bank account.\\nView details in your dashboard.',\n    },\n    {\n      name: 'GitHub',\n      email: 'noreply@github.com',\n      subject: 'New activity on acme/app',\n      date: 'Tue',\n      teaser:\n        '3 pull requests need your review. CI passed on main.\\nClick to open the review queue.',\n    },\n    {\n      name: 'Ava Chen',\n      email: 'ava.chen@example.com',\n      subject: 'Agenda for Friday standup',\n      date: 'Mon',\n      teaser:\n        \"Let's cover onboarding, billing bugs, and Q4 goals.\\nReply with anything you want to add.\",\n    },\n    {\n      name: 'Figma',\n      email: 'updates@figma.com',\n      subject: \"What's new in Figma\",\n      date: 'Sep 12',\n      teaser:\n        'Variables, auto layout improvements, and dev mode updates.\\nWatch the recap to learn more.',\n    },\n    {\n      name: 'Linear',\n      email: 'bot@linear.app',\n      subject: '[ACME-432] Edit modal broken',\n      date: 'Sep 11',\n      teaser:\n        'Issue created by Wendy. Repro steps included.\\nSeverity: high, priority: P1.',\n    },\n    {\n      name: 'Airbnb',\n      email: 'booking@airbnb.com',\n      subject: 'Your trip to Kyoto',\n      date: 'Sep 10',\n      teaser:\n        'Get ready for your stay. Check-in details and local recommendations inside.',\n    },\n    {\n      name: 'Notion',\n      email: 'team@notion.so',\n      subject: 'Weekly team recap',\n      date: 'Sep 09',\n      teaser:\n        'Marketing shipped pricing page revamp. Eng closed 14 issues.\\nSee full notes in the doc.',\n    },\n    {\n      name: 'Google Calendar',\n      email: 'calendar@google.com',\n      subject: 'Design sync moved',\n      date: 'Sep 09',\n      teaser:\n        \"Event 'Design sync' moved to 3:30 PM. Meet link updated in the invite.\",\n    },\n    {\n      name: 'HN Daily',\n      email: 'digest@ycombinator.com',\n      subject: 'Top stories today',\n      date: 'Sep 08',\n      teaser:\n        'OpenAI releases new API, SQLite 3.46, and why we left Kubernetes.\\nRead the full digest.',\n    },\n  ],\n};\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0]);\n  const [mails, setMails] = React.useState(data.mails);\n  const [query, setQuery] = React.useState('');\n  const { setOpen } = useSidebar();\n  const { setSelectedMail } = useMail();\n\n  const filteredMails = React.useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return mails;\n    return mails.filter((m) =>\n      [m.name, m.email, m.subject, m.teaser]\n        .join('\\n')\n        .toLowerCase()\n        .includes(q)\n    );\n  }, [mails, query]);\n\n  return (\n    <div className=\"flex\">\n      {/* This is the first sidebar */}\n      <Sidebar\n        className=\"border-r p-2 px-1\"\n        collapsible=\"none\"\n        style={{ '--sidebar-width': '12rem' } as React.CSSProperties}\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton\n                className=\"md:h-8 md:p-0\"\n                render={<a href=\"#\" />}\n                size=\"lg\"\n              >\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-accent text-sidebar-accent-foreground\">\n                  <IconBrandAmongUs className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      className=\"px-2.5 md:px-2\"\n                      isActive={activeItem?.title === item.title}\n                      onClick={() => {\n                        setActiveItem(item);\n                        const mail = data.mails.sort(() => Math.random() - 0.5);\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        );\n                        setOpen(true);\n                      }}\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n          <SidebarGroup>\n            <SidebarGroupLabel className=\"px-1.5 text-xs md:px-0\">\n              Labels\n            </SidebarGroupLabel>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.labels.map((label) => (\n                  <SidebarMenuItem key={label.title}>\n                    <SidebarMenuButton\n                      className=\"px-2.5 md:px-2\"\n                      render={<div className=\"flex items-center gap-3\" />}\n                    >\n                      <div className={`h-3 w-3 rounded ${label.color}`} />\n                      <span>{label.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar\n        className=\"hidden min-w-96 flex-1 border-r md:flex\"\n        collapsible=\"none\"\n      >\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"font-medium text-base text-foreground\">\n              {activeItem?.title}\n            </div>\n          </div>\n          <SidebarInput\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Type to search...\"\n            value={query}\n          />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0 pt-0\">\n            <SidebarGroupContent>\n              {filteredMails.length === 0 && (\n                <div className=\"p-4 text-muted-foreground text-sm\">\n                  No results\n                </div>\n              )}\n              {filteredMails.map((mail) => (\n                <a\n                  className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                  href=\"#\"\n                  key={mail.email}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    setSelectedMail(mail);\n                  }}\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{' '}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </div>\n  );\n}\n"
    },
    {
      "path": "content/components/sidebar/sidebar-04/app/page.tsx",
      "type": "registry:page",
      "target": "app/page.tsx",
      "content": "'use client';\n\nimport { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';\nimport { AppSidebar } from '@/components/sidebar-04/app-sidebar';\nimport { MailProvider, useMail } from '@/components/sidebar-04/mail-context';\n\nfunction MailPreview() {\n  const { selectedMail } = useMail();\n  if (!selectedMail) {\n    return (\n      <div className=\"flex h-full items-center justify-center text-muted-foreground text-sm\">\n        Select an email to preview\n      </div>\n    );\n  }\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"border-b p-4\">\n        <div className=\"font-semibold text-lg\">{selectedMail.subject}</div>\n        <div className=\"text-muted-foreground text-sm\">\n          From: {selectedMail.name} ({selectedMail.email})\n        </div>\n      </div>\n      <div className=\"whitespace-pre-wrap p-4 text-sm\">{`${selectedMail.teaser}\\n\\nThis is a sample message body for the selected email.\\nIt demonstrates the preview area on the right side.`}</div>\n    </div>\n  );\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <MailProvider>\n        <div className=\"flex h-dvh w-full\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"m-2 flex-1 rounded-xl border\">\n              <MailPreview />\n            </div>\n          </SidebarInset>\n        </div>\n      </MailProvider>\n    </SidebarProvider>\n  );\n}\n"
    },
    {
      "path": "content/components/sidebar/sidebar-04/mail-context.tsx",
      "type": "registry:component",
      "target": "components/sidebar-04/mail-context.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nexport type Mail = {\n  name: string;\n  email: string;\n  subject: string;\n  date: string;\n  teaser: string;\n  labels?: string[];\n};\n\ntype MailContextValue = {\n  selectedMail: Mail | null;\n  setSelectedMail: (mail: Mail | null) => void;\n};\n\nconst MailContext = React.createContext<MailContextValue | undefined>(\n  undefined\n);\n\nexport function MailProvider({ children }: { children: React.ReactNode }) {\n  const [selectedMail, setSelectedMail] = React.useState<Mail | null>(null);\n  const value = React.useMemo(\n    () => ({ selectedMail, setSelectedMail }),\n    [selectedMail]\n  );\n  return <MailContext.Provider value={value}>{children}</MailContext.Provider>;\n}\n\nexport function useMail() {\n  const ctx = React.useContext(MailContext);\n  if (!ctx) throw new Error('useMail must be used within MailProvider');\n  return ctx;\n}\n"
    }
  ],
  "categories": [
    "sidebar"
  ]
}