{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "schedule-button",
  "type": "registry:component",
  "title": "Schedule Button",
  "description": "A tactile, interactive button for scheduling posts with date and time selection.",
  "dependencies": [
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/schedule-button.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { Cancel01Icon } from '@hugeicons/core-free-icons';\nimport { FaAngleDown } from 'react-icons/fa6';\nimport { BsCalendar3 } from 'react-icons/bs';\n\nexport const ScheduleButton = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <MotionConfig transition={{ type: 'spring', bounce: 0.25, duration: 0.7 }}>\n      <div className=\"relative flex flex-col items-center\">\n        <motion.div\n          layout\n          className=\"relative z-10 w-80 border bg-white dark:border-neutral-800 dark:bg-neutral-900 shadow-sm\"\n          style={{ borderRadius: 25 }}\n        >\n          <div className=\"p-2\">\n            <textarea\n              placeholder=\"What's up?\"\n              className=\"w-full resize-none bg-transparent p-2 text-neutral-800 outline-none dark:text-neutral-100 selection:bg-black/20 dark:selection:bg-white/20 font-sans\"\n            />\n          </div>\n\n          <div className=\"relative pt-10\">\n            <AnimatePresence>\n              {isOpen && (\n                <motion.div\n                  className=\"absolute top-0 size-full px-2\"\n                  initial={{ opacity: 0, y: 40, filter: 'blur(4px)' }}\n                  animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n                  exit={{ opacity: 0, y: 40, filter: 'blur(4px)' }}\n                >\n                  <div className=\"relative flex h-10 items-center justify-between overflow-hidden rounded-full border bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800\">\n                    <div className=\"flex flex-1 items-center justify-between overflow-hidden rounded-full bg-white dark:bg-neutral-900\">\n                      <div className=\"flex h-10 w-full items-center justify-between border-r p-2 px-3 text-sm text-neutral-600 dark:border-neutral-700 dark:text-neutral-300\">\n                        <span className=\"truncate\">25, Dec 2024</span>\n                        <FaAngleDown\n                          size={12}\n                          className=\"shrink-0 text-neutral-400\"\n                        />\n                      </div>\n                      <div className=\"flex h-10 w-full items-center justify-between p-2 px-3 text-sm text-neutral-600 dark:text-neutral-300\">\n                        <span className=\"truncate\">9:30 AM</span>\n                        <FaAngleDown\n                          size={12}\n                          className=\"shrink-0 text-neutral-400\"\n                        />\n                      </div>\n                    </div>\n                    <button\n                      title=\"close\"\n                      className=\"flex h-10 w-10 shrink-0 items-center justify-center text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200\"\n                      onClick={() => setIsOpen(false)}\n                    >\n                      <HugeiconsIcon\n                        icon={Cancel01Icon}\n                        size={18}\n                        strokeWidth={2}\n                      />\n                    </button>\n                  </div>\n                </motion.div>\n              )}\n            </AnimatePresence>\n\n            <div className=\"relative flex items-center justify-end gap-2 p-2 px-3\">\n              <motion.button\n                layoutId=\"container\"\n                className=\"flex size-10 items-center justify-center border bg-neutral-100 text-neutral-500 dark:border-neutral-700 dark:bg-neutral-800\"\n                style={{\n                  borderRadius: 25,\n                  opacity: isOpen ? 0 : 1,\n                }}\n                onClick={() => setIsOpen(true)}\n              >\n                <motion.span\n                  layout=\"size\"\n                  initial={{\n                    opacity: 0,\n                  }}\n                  animate={{\n                    opacity: 1,\n                  }}\n                  exit={{\n                    opacity: 0,\n                  }}\n                  transition={{\n                    type: 'spring',\n                    bounce: 0,\n                    delay: 0.175,\n                    duration: 0.4,\n                  }}\n                >\n                  <BsCalendar3 size={18} />\n                </motion.span>\n              </motion.button>\n\n              <motion.button\n                className=\"origin-right bg-neutral-900 px-8 py-2 text-white dark:bg-neutral-100 dark:text-neutral-900 font-semibold\"\n                style={{ borderRadius: 25 }}\n                animate={{\n                  scale: isOpen ? 0.9 : 1,\n                  transition: {\n                    type: 'spring',\n                    bounce: 0,\n                    delay: isOpen ? 0.175 : 0,\n                    duration: 0.4,\n                  },\n                }}\n              >\n                Post\n              </motion.button>\n\n              <AnimatePresence>\n                {isOpen && (\n                  <div className=\"absolute inset-0 z-20 flex size-full items-center justify-center p-2 px-3\">\n                    <motion.button\n                      layoutId=\"container\"\n                      className=\"h-10 w-full bg-neutral-900 px-8 py-2 text-white dark:bg-neutral-100 dark:text-neutral-900 font-semibold\"\n                      style={{ borderRadius: 25 }}\n                    >\n                      <motion.span\n                        layout=\"size\"\n                        initial={{\n                          opacity: 0,\n                        }}\n                        animate={{\n                          opacity: 1,\n                        }}\n                        exit={{\n                          opacity: 0,\n                        }}\n                        transition={{\n                          type: 'spring',\n                          bounce: 0,\n                          delay: 0.175,\n                          duration: 0.4,\n                        }}\n                      >\n                        Schedule\n                      </motion.span>\n                    </motion.button>\n                  </div>\n                )}\n              </AnimatePresence>\n            </div>\n          </div>\n        </motion.div>\n\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              layout\n              initial={{ opacity: 0, y: -40 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -40 }}\n              transition={{\n                type: 'spring',\n                bounce: 0,\n                duration: 0.5,\n                delay: 0.1,\n              }}\n              className=\"relative z-0 mt-[-25px] flex w-80 items-center justify-center rounded-b-[25px] border border-t-0 bg-neutral-100 p-3 pt-8 pb-3 dark:border-neutral-700 dark:bg-neutral-800\"\n            >\n              <p className=\"text-[11px] font-medium text-neutral-500 text-center\">\n                Will be posted on 25 Dec 2024 at 9:30 AM\n              </p>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </MotionConfig>\n  );\n};\n"
    }
  ]
}