{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard",
  "type": "registry:block",
  "title": "Dashboard",
  "description": "Blinkist Dashboard Page with Header and Sidebar",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "app/dashboard/page.tsx",
      "content": "import { DashboardHeader } from \"@/components/dashboard/header\"\nimport { DashboardSidebar } from \"@/components/dashboard/sidebar-nav\"\n\nexport default function DashboardPage() {\n  return (\n    <div className=\"flex h-screen\">\n      <DashboardSidebar />\n      <div className=\"flex flex-col flex-1 overflow-hidden\">\n        <DashboardHeader />\n        <main className=\"flex-1 overflow-auto bg-white\">{/* Main content area intentionally left blank */}</main>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/dashboard/page.tsx"
    },
    {
      "path": "components/dashboard/header.tsx",
      "content": "import { SearchIcon } from \"lucide-react\"\n\nexport function DashboardHeader() {\n  return (\n    <header className=\"border-b border-gray-200 bg-white\">\n      <div className=\"flex items-center justify-end h-16 px-6\">\n        <div className=\"w-[400px]\">\n          <div className=\"relative\">\n            <input\n              type=\"text\"\n              placeholder=\"Blinks, Guides, Shortcasts or Collections\"\n              className=\"w-full h-10 pl-4 pr-10 rounded-lg bg-[#F2F6F4] border border-gray-200 text-gray-700 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 placeholder-[#8E969A]\"\n            />\n            <button className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500\">\n              <SearchIcon className=\"h-5 w-5\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/dashboard/sidebar.tsx",
      "content": "import type React from \"react\"\nimport Link from \"next/link\"\nimport Image from \"next/image\"\nimport {\n  Home,\n  Search,\n  BookOpen,\n  LayoutGrid,\n  Highlighter,\n  BarChart2,\n  Calendar,\n  Gift,\n  Settings,\n  HelpCircle,\n  LogOut,\n} from \"lucide-react\"\n\nexport function Sidebar() {\n  return (\n    <aside className=\"w-[176px] bg-white border-r border-gray-200 flex-shrink-0 hidden md:flex flex-col h-screen\">\n      <div className=\"p-4\">\n        <Image\n          src=\"https://cdn.brandfetch.io/blinkist.com/w/512/h/99/logo?c=1idyyS2Jmw4KgfR-C00\"\n          alt=\"Blinkist Logo\"\n          width={120}\n          height={24}\n          className=\"h-8 w-auto\"\n        />\n      </div>\n\n      <nav className=\"flex-1 overflow-y-auto py-4\">\n        <ul className=\"space-y-1\">\n          <NavItem href=\"/dashboard\" icon={<Home className=\"h-5 w-5\" />} label=\"For You\" active />\n          <NavItem href=\"#\" icon={<Search className=\"h-5 w-5\" />} label=\"Explore\" />\n          <NavItem href=\"#\" icon={<BookOpen className=\"h-5 w-5\" />} label=\"My Library\" />\n          <NavItem href=\"#\" icon={<LayoutGrid className=\"h-5 w-5\" />} label=\"Spaces\" />\n          <NavItem href=\"#\" icon={<Highlighter className=\"h-5 w-5\" />} label=\"Highlights\" />\n          <NavItem href=\"#\" icon={<BarChart2 className=\"h-5 w-5\" />} label=\"Infographics\" badge=\"NEW\" />\n          <NavItem href=\"#\" icon={<Calendar className=\"h-5 w-5\" />} label=\"Live Sessions\" badge=\"NEW\" />\n          <NavItem href=\"#\" icon={<Gift className=\"h-5 w-5\" />} label=\"Today's Free Blink\" />\n        </ul>\n      </nav>\n\n      <div className=\"border-t border-gray-200 py-4\">\n        <ul className=\"space-y-1\">\n          <NavItem href=\"#\" icon={<Settings className=\"h-5 w-5\" />} label=\"Settings\" />\n          <NavItem href=\"#\" icon={<HelpCircle className=\"h-5 w-5\" />} label=\"Help & support\" />\n          <NavItem href=\"#\" icon={<LogOut className=\"h-5 w-5\" />} label=\"Logout\" />\n        </ul>\n      </div>\n    </aside>\n  )\n}\n\ninterface NavItemProps {\n  href: string\n  icon: React.ReactNode\n  label: string\n  active?: boolean\n  badge?: string\n}\n\nfunction NavItem({ href, icon, label, active, badge }: NavItemProps) {\n  return (\n    <li className=\"relative\">\n      {active && <div className=\"absolute left-0 top-0 w-1 h-full bg-blue-500\" />}\n      <Link\n        href={href}\n        className={`flex items-center gap-3 px-3 py-2 ${\n          active ? \"text-blue-500 font-medium\" : \"text-gray-700 hover:bg-gray-50\"\n        }`}\n      >\n        {icon}\n        <span>{label}</span>\n        {badge && (\n          <span className=\"ml-auto text-[#F1B14C] bg-[#FDF5E8] text-xs font-medium px-2 py-0.5 rounded\">{badge}</span>\n        )}\n      </Link>\n    </li>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/dashboard/sidebar-nav.tsx",
      "content": "\"use client\"\n\nimport type React from \"react\"\n\nimport Link from \"next/link\"\nimport { usePathname } from \"next/navigation\"\nimport Image from \"next/image\"\nimport {\n  Home,\n  Search,\n  BookmarkIcon,\n  LayoutGrid,\n  PenLine,\n  BarChart2,\n  Calendar,\n  Gift,\n  Settings,\n  HelpCircle,\n  LogOut,\n} from \"lucide-react\"\n\nexport function DashboardSidebar() {\n  const pathname = usePathname()\n\n  return (\n    <aside className=\"w-[240px] bg-[#F9F9FB] border-r border-gray-200 flex-shrink-0 hidden md:flex flex-col h-screen\">\n      <div className=\"p-6 flex items-center\">\n        <Image\n          src=\"https://cdn.brandfetch.io/blinkist.com/w/512/h/99/logo?c=1idyyS2Jmw4KgfR-C00\"\n          alt=\"Blinkist Logo\"\n          width={100}\n          height={35}\n          className=\"h-6 w-auto\"\n        />\n      </div>\n\n      <nav className=\"flex-1 overflow-y-auto py-4\">\n        <ul className=\"space-y-1\">\n          <NavItem\n            href=\"/dashboard\"\n            icon={<Home className=\"h-6 w-6\" />}\n            label=\"For You\"\n            active={pathname === \"/dashboard\"}\n          />\n          <NavItem href=\"#\" icon={<Search className=\"h-6 w-6\" />} label=\"Explore\" />\n          <NavItem href=\"#\" icon={<BookmarkIcon className=\"h-6 w-6\" />} label=\"My Library\" />\n          <NavItem href=\"#\" icon={<LayoutGrid className=\"h-6 w-6\" />} label=\"Spaces\" />\n          <NavItem href=\"#\" icon={<PenLine className=\"h-6 w-6\" />} label=\"Highlights\" />\n          <NavItem href=\"#\" icon={<BarChart2 className=\"h-6 w-6\" />} label=\"Infographics\" badge=\"NEW\" />\n          <NavItem href=\"#\" icon={<Calendar className=\"h-6 w-6\" />} label=\"Live Sessions\" badge=\"NEW\" />\n          <NavItem href=\"#\" icon={<Gift className=\"h-6 w-6\" />} label=\"Today's Free Blink\" />\n        </ul>\n\n        {/* Moved the bottom navigation right after the main navigation with just a separator */}\n        <div className=\"border-t border-gray-200 mt-4 pt-4\">\n          <ul className=\"space-y-1\">\n            <NavItem href=\"#\" icon={<Settings className=\"h-6 w-6\" />} label=\"Settings\" />\n            <NavItem href=\"#\" icon={<HelpCircle className=\"h-6 w-6\" />} label=\"Help & support\" />\n            <NavItem href=\"#\" icon={<LogOut className=\"h-6 w-6\" />} label=\"Logout\" />\n          </ul>\n        </div>\n      </nav>\n    </aside>\n  )\n}\n\ninterface NavItemProps {\n  href: string\n  icon: React.ReactNode\n  label: string\n  active?: boolean\n  badge?: string\n}\n\nfunction NavItem({ href, icon, label, active, badge }: NavItemProps) {\n  return (\n    <li className=\"relative\">\n      {active && <div className=\"absolute left-0 top-0 w-1 h-full bg-blue-500\" />}\n      <Link\n        href={href}\n        className={`flex items-center gap-4 px-6 py-3 ${\n          active ? \"text-blue-500 font-medium\" : \"text-[#0E2B3D] hover:bg-gray-50\"\n        }`}\n      >\n        {icon}\n        <span className=\"text-[14px]\">{label}</span>\n        {badge && (\n          <span className=\"ml-auto text-[#F1B14C] bg-[#FDF5E8] text-xs font-medium px-2 py-0.5 rounded\">{badge}</span>\n        )}\n      </Link>\n    </li>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/dashboard/search.tsx",
      "content": "import { SearchIcon } from \"lucide-react\"\n\nexport function Search() {\n  return (\n    <div className=\"relative w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"text\"\n          placeholder=\"Blinks, Guides, Shortcasts or Collections\"\n          className=\"w-full h-10 pl-4 pr-10 rounded-lg bg-gray-100 border border-gray-200 text-gray-700 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500\"\n        />\n        <button className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500\">\n          <SearchIcon className=\"h-5 w-5\" />\n        </button>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}