{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "activities-card",
  "type": "registry:component",
  "title": "Activities Card",
  "description": "An expandable activities card with smooth spring animations and a premium 3D header aesthetic.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/activities-card.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState, useEffect, type FC, type ReactNode } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { ChevronUpIcon } from 'lucide-react';\n\nexport interface ActivityItemType {\n  icon: ReactNode;\n  title: string;\n  desc: string;\n  time: string;\n}\n\nexport interface ActivitiesCardProps {\n  headerIcon: ReactNode;\n  title: string;\n  subtitle: string;\n  activities: ActivityItemType[];\n}\n\nconst ActivityItem: FC<ActivityItemType> = ({ icon, title, desc, time }) => {\n  return (\n    <motion.div\n      layout\n      initial={{ opacity: 0, x: -10 }}\n      animate={{ opacity: 1, x: 0 }}\n      className=\"flex cursor-pointer items-center gap-3 px-3 py-3 transition-colors hover:bg-neutral-50 sm:gap-4 sm:px-5 dark:hover:bg-neutral-800/50\"\n    >\n      <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-100/50 bg-gradient-to-b from-[#f4f4f7]/90 to-[#E9EAF0]/90 text-gray-400 sm:h-12 sm:w-12 dark:border-neutral-700 dark:from-neutral-800 dark:to-neutral-900 dark:text-neutral-500\">\n        {icon}\n      </div>\n\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"truncate text-[15px] leading-tight font-bold text-[#3E3E43] sm:text-[17px] dark:text-neutral-200\">\n          {title}\n        </p>\n        <p className=\"truncate text-[13px] text-[#909092] sm:text-[15px] dark:text-neutral-500\">\n          {desc}\n        </p>\n      </div>\n\n      <span className=\"pt-1 text-[11px] whitespace-nowrap text-[#9F9FA1] sm:text-[13px] dark:text-neutral-600\">\n        {time}\n      </span>\n    </motion.div>\n  );\n};\n\nexport const ActivitiesCard: FC<ActivitiesCardProps> = ({\n  headerIcon,\n  title,\n  subtitle,\n  activities,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [isMobile, setIsMobile] = useState(false);\n\n  useEffect(() => {\n    const checkMobile = () => setIsMobile(window.innerWidth < 640);\n    checkMobile();\n    window.addEventListener('resize', checkMobile);\n    return () => window.removeEventListener('resize', checkMobile);\n  }, []);\n\n  return (\n    <MotionConfig transition={{ type: 'spring', bounce: 0, duration: 0.6 }}>\n      <motion.div\n        layout\n        className=\"w-xs overflow-hidden rounded-xl border-2 border-[#e7e6e6]/60 bg-[#FEFEFE] shadow-lg sm:w-sm sm:rounded-[20px] dark:border-neutral-800 dark:bg-neutral-900\"\n      >\n        <motion.button\n          onClick={() => setOpen(!open)}\n          className=\"flex w-full items-center justify-between gap-2 px-3 py-2 transition-colors sm:gap-3 sm:px-4 sm:py-3.5\"\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-3 text-left sm:gap-4\">\n            <motion.div\n              initial={{\n                width: isMobile ? 48 : 60,\n                height: isMobile ? 48 : 60,\n              }}\n              animate={{\n                width: open ? (isMobile ? 36 : 48) : isMobile ? 48 : 60,\n                height: open ? (isMobile ? 36 : 48) : isMobile ? 48 : 60,\n              }}\n              className=\"relative flex shrink-0 items-center justify-center overflow-hidden rounded-lg border border-gray-100/50 bg-gradient-to-b from-[#f4f4f7] via-[#efeef2] to-[#E9EAF0] shadow-sm sm:rounded-xl dark:border-neutral-700 dark:from-neutral-700 dark:via-neutral-800 dark:to-neutral-900\"\n            >\n              <motion.span className=\"pointer-events-none absolute inset-0 rounded-[inherit] shadow-[inset_1px_1px_2px_rgba(255,255,255,0.8),_inset_-1px_-1px_2px_rgba(165,172,190,0.2)] dark:shadow-[inset_1px_1px_1px_rgba(255,255,255,0.1),inset_-1px_-1px_3px_rgba(0,0,0,0.6)]\" />\n              <motion.div animate={{ scale: open ? 0.7 : 1 }}>\n                {headerIcon}\n              </motion.div>\n            </motion.div>\n\n            <div className=\"flex min-w-0 flex-1 flex-col justify-center\">\n              <motion.p\n                layout\n                className=\"truncate text-[16px] font-bold tracking-tight text-neutral-900 sm:text-[17px] dark:text-neutral-100\"\n              >\n                {title}\n              </motion.p>\n              <AnimatePresence mode=\"popLayout\" initial={false}>\n                {!open && (\n                  <motion.p\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    transition={{\n                      duration: 0.3,\n                      ease: 'easeOut',\n                    }}\n                    className=\"truncate text-[14px] tracking-tight text-[#BFBFC2] sm:text-[15px] dark:text-neutral-500\"\n                  >\n                    {subtitle}\n                  </motion.p>\n                )}\n              </AnimatePresence>\n            </div>\n          </div>\n\n          <motion.div\n            animate={{ rotate: open ? 180 : 0 }}\n            className=\"flex size-6 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-[#9C97A8]/70 to-[#7A7596]/70 shadow-xs dark:from-neutral-700 dark:to-neutral-800\"\n          >\n            <ChevronUpIcon className=\"size-5 text-white\" />\n          </motion.div>\n        </motion.button>\n\n        <AnimatePresence>\n          {open && (\n            <motion.div\n              initial={{ opacity: 0, height: 0 }}\n              animate={{ opacity: 1, height: 'auto' }}\n              exit={{ opacity: 0, height: 0 }}\n              className=\"border-t-2 border-[#e7e6e6]/60 dark:border-neutral-800\"\n            >\n              <div className=\"py-2\">\n                {activities.map((item, i) => (\n                  <ActivityItem key={i} {...item} />\n                ))}\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </motion.div>\n    </MotionConfig>\n  );\n};\n"
    }
  ]
}