{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "info-card-demo",
  "type": "registry:example",
  "description": "Example of the kl-ui info-card component.",
  "registryDependencies": [
    "https://karrix.dev/r/info-card"
  ],
  "files": [
    {
      "path": "registry/kl-ui/info-card/info-card-demo.tsx",
      "content": "import {\n  InfoCard,\n  InfoCardContent,\n  InfoCardTitle,\n  InfoCardDescription,\n  InfoCardMedia,\n  InfoCardFooter,\n  InfoCardDismiss,\n  InfoCardAction,\n} from \"@/components/kl-ui/info-card\";\nimport {\n  Sidebar,\n  SidebarProvider,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuItem,\n  SidebarMenuButton,\n  SidebarFooter,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\";\nimport {\n  ExternalLink,\n  User,\n  ChevronsUpDown,\n  Calendar,\n  Home,\n  Inbox,\n  Search,\n  Settings,\n} from \"lucide-react\";\nimport Link from \"next/link\";\n\n// Menu items.\nconst items = [\n  {\n    title: \"Home\",\n    url: \"#\",\n    icon: Home,\n  },\n  {\n    title: \"Inbox\",\n    url: \"#\",\n    icon: Inbox,\n  },\n  {\n    title: \"Calendar\",\n    url: \"#\",\n    icon: Calendar,\n  },\n  {\n    title: \"Search\",\n    url: \"#\",\n    icon: Search,\n  },\n  {\n    title: \"Settings\",\n    url: \"#\",\n    icon: Settings,\n  },\n];\n\nexport function InfoCardDemo() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Application</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <InfoCard>\n            <InfoCardContent>\n              <InfoCardTitle>Introducing New Dashboard</InfoCardTitle>\n              <InfoCardDescription>\n                New Feature. New Platform. Same Feel.\n              </InfoCardDescription>\n              <InfoCardMedia\n                media={[\n                  {\n                    src: \"https://cd-misc.s3.us-east-2.amazonaws.com/sidebar/third.webp\",\n                  },\n                  {\n                    src: \"https://cd-misc.s3.us-east-2.amazonaws.com/sidebar/second.webp\",\n                  },\n                  {\n                    src: \"https://cd-misc.s3.us-east-2.amazonaws.com/sidebar/first.webp\",\n                  },\n                ]}\n              />\n              <InfoCardFooter>\n                <InfoCardDismiss>Dismiss</InfoCardDismiss>\n                <InfoCardAction>\n                  <Link\n                    href=\"#\"\n                    className=\"flex flex-row items-center gap-1 underline\"\n                  >\n                    Try it out <ExternalLink size={12} />\n                  </Link>\n                </InfoCardAction>\n              </InfoCardFooter>\n            </InfoCardContent>\n          </InfoCard>\n          <SidebarGroup>\n            <SidebarMenuButton className=\"w-full justify-between gap-3 h-12\">\n              <div className=\"flex items-center gap-2\">\n                <User className=\"h-5 w-5 rounded-md\" />\n                <div className=\"flex flex-col items-start\">\n                  <span className=\"text-sm font-medium\">KL</span>\n                  <span className=\"text-xs text-muted-foreground\">\n                    kl@example.com\n                  </span>\n                </div>\n              </div>\n              <ChevronsUpDown className=\"h-5 w-5 rounded-md\" />\n            </SidebarMenuButton>\n          </SidebarGroup>\n        </SidebarFooter>\n      </Sidebar>\n      <div className=\"px-4 py-2\">\n        <SidebarTrigger />\n      </div>\n    </SidebarProvider>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/info-card-demo.tsx"
    }
  ]
}