{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notification-1",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "card",
    "scroll-area",
    "tabs",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/notification-1.tsx",
      "content": "import React from \"react\";\nimport {\n  HiBell,\n  HiCheckCircle,\n  HiExclamationTriangle,\n  HiInformationCircle,\n  HiChatBubbleLeftEllipsis,\n  HiUserPlus,\n  HiRocketLaunch,\n  HiArchiveBox,\n} from \"react-icons/hi2\";\nimport { cn } from \"@/lib/utils\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\n\nexport type NotificationType =\n  | \"info\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"message\"\n  | \"user\"\n  | \"system\";\n\nexport interface Notification {\n  id: string;\n  type: NotificationType;\n  title: string;\n  description: string;\n  timestamp: string;\n  isUnread?: boolean;\n  avatar?: string;\n  initials?: string;\n}\n\nexport interface Notification1Props {\n  badge?: string;\n  heading?: string;\n  description?: string;\n  notifications?: Notification[];\n  className?: string;\n}\n\nconst IconMap: Record<NotificationType, React.ElementType> = {\n  info: HiInformationCircle,\n  success: HiCheckCircle,\n  warning: HiExclamationTriangle,\n  error: HiExclamationTriangle,\n  message: HiChatBubbleLeftEllipsis,\n  user: HiUserPlus,\n  system: HiRocketLaunch,\n};\n\nconst ColorMap: Record<NotificationType, string> = {\n  info: \"text-primary\",\n  success: \"text-primary\",\n  warning: \"text-primary\",\n  error: \"text-destructive\",\n  message: \"text-primary\",\n  user: \"text-primary\",\n  system: \"text-primary\",\n};\n\nconst defaultNotifications: Notification[] = [\n  {\n    id: \"1\",\n    type: \"system\",\n    title: \"New Version Available\",\n    description:\n      \"Version 2.4.0 has been deployed with performance improvements and new features.\",\n    timestamp: \"2 mins ago\",\n    isUnread: true,\n  },\n  {\n    id: \"2\",\n    type: \"message\",\n    title: \"New Comment\",\n    description:\n      'Alex commented on your \"Design System\" project: \"This looks amazing! Can we add dark mode?\"',\n    timestamp: \"3 hours ago\",\n    isUnread: false,\n    initials: \"AB\",\n  },\n  {\n    id: \"3\",\n    type: \"success\",\n    title: \"Export Completed\",\n    description:\n      \"Your data export for Q1 Financials has been completed and is ready for download.\",\n    timestamp: \"5 hours ago\",\n    isUnread: false,\n  },\n  {\n    id: \"4\",\n    type: \"warning\",\n    title: \"Storage Almost Full\",\n    description:\n      \"Your workspace is at 85% capacity. Consider upgrading your plan to avoid service interruption.\",\n    timestamp: \"Yesterday\",\n    isUnread: false,\n  },\n];\n\nexport default function Notification1({\n  notifications = defaultNotifications,\n  className,\n}: Notification1Props) {\n  return (\n    <section className={cn(\"bg-background py-16\", className)}>\n      <div className=\"container mx-auto px-4 md:px-6\">\n        <div className=\"w-full\">\n          <Card className=\"border-border bg-card mx-auto max-w-sm gap-0 overflow-hidden rounded-[28px] p-0\">\n            <CardHeader className=\"p-2 px-4\">\n              <div className=\"my-auto flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <CardTitle className=\"text-lg font-semibold\">\n                    Activity Feed\n                  </CardTitle>\n                </div>\n                <Button variant={\"secondary\"}>See All</Button>\n              </div>\n            </CardHeader>\n            <CardContent className=\"gap-0 p-0\">\n              <Tabs defaultValue=\"all\" className=\"w-full\">\n                <div className=\"bg-muted/10 p-1\">\n                  <TabsList className=\"bg-muted grid w-full max-w-[400px] grid-cols-3 rounded-md p-1 shadow-[0px_0px_0px_0.5px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.06),0px_2px_4px_0px_rgba(0,0,0,0.04)]\">\n                    <TabsTrigger\n                      value=\"all\"\n                      className=\"data-[state=active]:border-/50 data-[state=active]:bg-primary rounded-sm border-b-2 border-transparent text-sm font-medium data-[state=active]:shadow-none\"\n                    >\n                      All\n                    </TabsTrigger>\n                    <TabsTrigger\n                      value=\"unread\"\n                      className=\"data-[state=active]:border-/50 data-[state=active]:bg-primary rounded-sm border-b-2 border-transparent text-sm font-medium data-[state=active]:shadow-none\"\n                    >\n                      Unread\n                    </TabsTrigger>\n                    <TabsTrigger\n                      value=\"archived\"\n                      className=\"data-[state=active]:border-/50 data-[state=active]:bg-primary rounded-sm border-b-2 border-transparent text-sm font-medium data-[state=active]:shadow-none\"\n                    >\n                      Archived\n                    </TabsTrigger>\n                  </TabsList>\n                </div>\n\n                <ScrollArea className=\"h-[250px]\">\n                  <TabsContent value=\"all\" className=\"\">\n                    <div className=\"divide-border divide-y\">\n                      {notifications.map((notification) => (\n                        <NotificationRow\n                          key={notification.id}\n                          notification={notification}\n                        />\n                      ))}\n                    </div>\n                  </TabsContent>\n                  <TabsContent value=\"unread\" className=\"m-0\">\n                    <div className=\"divide-border divide-y\">\n                      {notifications\n                        .filter((n) => n.isUnread)\n                        .map((notification) => (\n                          <NotificationRow\n                            key={notification.id}\n                            notification={notification}\n                          />\n                        ))}\n                      {notifications.filter((n) => n.isUnread).length === 0 && (\n                        <div className=\"flex h-64 flex-col items-center justify-center p-6 text-center\">\n                          <HiBell className=\"text-muted/20 mb-4 h-12 w-12\" />\n                          <p className=\"text-muted-foreground font-medium\">\n                            No unread notifications\n                          </p>\n                        </div>\n                      )}\n                    </div>\n                  </TabsContent>\n                  <TabsContent value=\"archived\" className=\"m-0\">\n                    <div className=\"flex h-64 flex-col items-center justify-center p-6 text-center\">\n                      <HiArchiveBox className=\"text-muted/20 mb-4 h-12 w-12\" />\n                      <p className=\"text-muted-foreground font-medium\">\n                        Your archive is empty\n                      </p>\n                    </div>\n                  </TabsContent>\n                </ScrollArea>\n              </Tabs>\n            </CardContent>\n            <div className=\"border-border bg-muted/30 border-t p-2 text-center\">\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"text-muted-foreground hover:text-foreground text-sm font-medium\"\n              >\n                Mark all as read\n              </Button>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nfunction NotificationRow({ notification }: { notification: Notification }) {\n  const Icon = IconMap[notification.type];\n\n  return (\n    <div\n      className={cn(\n        \"group hover:bg-muted/50 flex items-start gap-4 p-3 transition-colors\",\n      )}\n    >\n      <div className=\"relative mt-1\">\n        <div\n          className={cn(\n            \"bg-muted flex h-10 w-10 items-center justify-center rounded-full shadow-[0px_0px_0px_0.5px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.06),0px_2px_4px_0px_rgba(0,0,0,0.04),inset_0px_1px_4px_0px_rgba(255,255,255,1),inset_0px_-1px_4px_0px_rgba(0,0,0,0.1)] dark:shadow-[0px_0px_0px_0.5px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.06),0px_2px_4px_0px_rgba(0,0,0,0.04),inset_0px_1px_4px_0px_rgba(255,255,255,0.1),inset_0px_-1px_4px_0px_rgba(0,0,0,0.1)]\",\n            ColorMap[notification.type],\n          )}\n        >\n          <Icon className=\"h-5 w-5\" />\n        </div>\n        {notification.isUnread && (\n          <span className=\"absolute top-0 right-0 flex h-3 w-3\">\n            <span className=\"bg-primary relative inline-flex h-3 w-3 rounded-full\"></span>\n          </span>\n        )}\n      </div>\n      <div className=\"flex-1 space-y-1\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <h4\n            className={cn(\n              \"text-foreground text-sm font-semibold tracking-tight\",\n              notification.isUnread && \"font-bold\",\n            )}\n          >\n            {notification.title}\n          </h4>\n          <span className=\"text-muted-foreground/60 text-xs font-medium\">\n            {notification.timestamp}\n          </span>\n        </div>\n        <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n          {notification.description}\n        </p>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/notification-1.tsx"
    }
  ],
  "type": "registry:ui"
}