{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "activity-dropdown",
  "title": "Activity Dropdown",
  "description": "A modern activity/notification dropdown with smooth animations and responsive motion.",
  "dependencies": [
    "react",
    "@tabler/icons-react"
  ],
  "files": [
    {
      "path": "registry/gammaui/activity-dropdown.tsx",
      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useState } from \"react\"\nimport {\n  IconAward,\n  IconBell,\n  IconCalendar,\n  IconCheckbox,\n  IconChevronUp,\n  IconMessageCircle,\n  IconTag,\n} from \"@tabler/icons-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Activity {\n  id: number\n  icon: React.ReactNode\n  iconBg: string\n  title: string\n  description: string\n  time: string\n}\n\nconst activities: Activity[] = [\n  {\n    id: 1,\n    icon: <IconMessageCircle className=\"h-4 w-4\" />,\n    iconBg: \"bg-neutral-700 dark:bg-neutral-700 bg-neutral-200\",\n    title: \"New Message!\",\n    description: \"Sarah sent you a message.\",\n    time: \"Just Now\",\n  },\n  {\n    id: 2,\n    icon: <IconAward className=\"h-4 w-4\" />,\n    iconBg: \"bg-neutral-700 dark:bg-neutral-700 bg-neutral-200\",\n    title: \"Level Up!\",\n    description: \"You've unlocked a new achievement.\",\n    time: \"2 min ago\",\n  },\n  {\n    id: 3,\n    icon: <IconCalendar className=\"h-4 w-4\" />,\n    iconBg: \"bg-neutral-700 dark:bg-neutral-700 bg-neutral-200\",\n    title: \"Reminder: Meeting Today\",\n    description: \"Your team meeting starts in 30 minutes.\",\n    time: \"3 hour ago\",\n  },\n  {\n    id: 4,\n    icon: <IconTag className=\"h-4 w-4\" />,\n    iconBg: \"bg-neutral-700 dark:bg-neutral-700 bg-neutral-200\",\n    title: \"Special Offer!\",\n    description: \"Save 20% off on subscription upgrade.\",\n    time: \"12 hours ago\",\n  },\n  {\n    id: 5,\n    icon: <IconCheckbox className=\"h-4 w-4\" />,\n    iconBg: \"bg-neutral-700 dark:bg-neutral-700 bg-neutral-200\",\n    title: \"Task Assigned!\",\n    description: \"A new task is awaiting your action.\",\n    time: \"Yesterday\",\n  },\n]\n\nexport default function ActivityDropdown() {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    <div\n      className={cn(\n        \"w-full max-w-md cursor-pointer overflow-hidden rounded-2xl shadow-2xl select-none\",\n        \"bg-white dark:bg-neutral-900\",\n        \"shadow-xl shadow-black/10 dark:shadow-black/50\",\n        \"transition-all duration-500 ease-in-out\",\n        isOpen ? \"rounded-3xl\" : \"rounded-2xl\"\n      )}\n      onClick={() => setIsOpen(!isOpen)}\n    >\n      {/* Header */}\n      <div className=\"flex items-center gap-4 p-4\">\n        <div className=\"flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 transition-colors duration-300 dark:bg-neutral-800\">\n          <IconBell className=\"h-5 w-5 text-neutral-600 dark:text-neutral-300\" />\n        </div>\n        <div className=\"flex-1 overflow-hidden\">\n          <h3 className=\"text-base font-semibold text-neutral-900 dark:text-white\">\n            5 New Activities\n          </h3>\n          <p\n            className={cn(\n              \"text-sm text-neutral-500 dark:text-neutral-400\",\n              \"transition-all duration-500 ease-in-out\",\n              isOpen ? \"mt-0 max-h-0 opacity-0\" : \"mt-0.5 max-h-6 opacity-100\"\n            )}\n          >\n            What's happening around you\n          </p>\n        </div>\n        <div className=\"flex h-8 w-8 items-center justify-center\">\n          <IconChevronUp\n            className={cn(\n              \"h-5 w-5 text-neutral-400 transition-transform duration-500 ease-in-out\",\n              isOpen ? \"rotate-0\" : \"rotate-180\"\n            )}\n          />\n        </div>\n      </div>\n\n      {/* Activity List */}\n      <div\n        className={cn(\n          \"grid\",\n          \"transition-all duration-500 ease-in-out\",\n          isOpen ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\"\n        )}\n      >\n        <div className=\"overflow-hidden\">\n          <div className=\"px-2 pb-4\">\n            <div className=\"space-y-1\">\n              {activities.map((activity, index) => (\n                <div\n                  key={activity.id}\n                  className={cn(\n                    \"flex items-start gap-3 rounded-xl p-3\",\n                    \"transition-all duration-500 ease-in-out\",\n                    \"hover:bg-neutral-100 dark:hover:bg-neutral-800/50\",\n                    isOpen\n                      ? \"translate-y-0 opacity-100\"\n                      : \"translate-y-4 opacity-0\"\n                  )}\n                  style={{\n                    transitionDelay: isOpen ? `${index * 75}ms` : \"0ms\",\n                  }}\n                >\n                  <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-neutral-100 transition-colors duration-300 dark:bg-neutral-700\">\n                    <span className=\"text-neutral-600 dark:text-neutral-300\">\n                      {activity.icon}\n                    </span>\n                  </div>\n                  <div className=\"min-w-0 flex-1\">\n                    <h4 className=\"text-sm font-semibold text-neutral-900 dark:text-white\">\n                      {activity.title}\n                    </h4>\n                    <p className=\"truncate text-sm text-neutral-500 dark:text-neutral-400\">\n                      {activity.description}\n                    </p>\n                  </div>\n                  <span className=\"shrink-0 pt-0.5 text-xs text-neutral-400 dark:text-neutral-500\">\n                    {activity.time}\n                  </span>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}