{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "create-community",
  "type": "registry:component",
  "title": "Create Community",
  "description": "Dialog for creating communities with name, description, and settings.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/create-community.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { X, Info } from 'lucide-react';\n\ninterface CommunityData {\n  communityName: string;\n  pricing: string;\n  isApplicationRequired: boolean;\n}\n\ninterface CreateCommunityProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onCreate: (data: CommunityData) => void;\n  initialData?: Partial<CommunityData>;\n}\n\nexport const CreateCommunity: React.FC<CreateCommunityProps> = ({\n  isOpen,\n  onClose,\n  onCreate,\n  initialData\n}) => {\n  const [communityName, setCommunityName] = useState(initialData?.communityName || 'Clipping Course');\n  const [pricing, setPricing] = useState(initialData?.pricing || 'FREE');\n  const [isApplicationRequired, setIsApplicationRequired] = useState(initialData?.isApplicationRequired || false);\n\n  useEffect(() => {\n    if (initialData) {\n      requestAnimationFrame(() => {\n        if (initialData.communityName) setCommunityName(initialData.communityName);\n        if (initialData.pricing) setPricing(initialData.pricing);\n        if (initialData.isApplicationRequired !== undefined) setIsApplicationRequired(initialData.isApplicationRequired);\n      });\n    }\n  }, [initialData]);\n\n  const pricingOptions = ['FREE', 'ONE-TIME', 'MONTHLY'];\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      {isOpen && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 overflow-y-auto overflow-x-hidden\">\n\n          {/* BG Overlay Animation */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}\n            onClick={onClose}\n            className=\"fixed inset-0 bg-black/20 backdrop-blur-sm dark:bg-[#0a0a0a] dark:backdrop-blur-none\"\n          >\n            {/* Glow Effects */}\n            <div\n              className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[140%] h-75 bg-white/30 blur-[80px] rotate-[-15deg] hidden dark:block\"\n              style={{ borderRadius: '50%' }}\n            />\n            <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,#000_80%)] hidden dark:block\" />\n          </motion.div>\n\n          {/* Modal Container */}\n          <motion.div\n            initial={{ opacity: 0, scale: 0.92, y: 30 }}\n            animate={{ opacity: 1, scale: 1, y: 0 }}\n            exit={{ opacity: 0, scale: 0.92, y: 30 }}\n            transition={{\n              duration: 0.6,\n              ease: [0.16, 1, 0.3, 1],\n              opacity: { duration: 0.4 }\n            }}\n            className=\"relative w-full max-w-135 backdrop-blur-2xl rounded-[32px] p-5 sm:p-6 shadow-2xl z-50 my-auto\n                       bg-white border-[6px] sm:border-12 border-[#F2F2F2]\n                       dark:bg-[#131313]/80 dark:border-[#232323]\"\n          >\n            {/* Header */}\n            <div className=\"flex justify-between items-start mb-4\">\n              <div>\n                <h2 className=\"text-xl sm:text-2xl font-medium tracking-tight text-gray-900 dark:text-white\">Create community</h2>\n                <p className=\"text-[13px] sm:text-[14px] mt-3 sm:mt-4 leading-relaxed max-w-full text-gray-500 dark:text-[#696969]\">\n                  Enter your community name and choose how people can join. You can make it free, charge a fee, or require an application.\n                </p>\n              </div>\n              <button title='close'\n                onClick={onClose}\n                className=\"transition-colors p-1 text-gray-400 hover:text-gray-600 dark:text-[#888888] dark:hover:text-white\"\n              >\n                <X size={20} />\n              </button>\n            </div>\n\n            {/* Input Section */}\n            <div className=\"space-y-4\">\n              <div className=\"space-y-2\">\n                <label className=\"text-[14px] ml-1 text-gray-500 dark:text-[#8A8A8A]\">Community name</label>\n                <div className=\"relative group\">\n                  <input title='name'\n                    type=\"text\"\n                    value={communityName}\n                    onChange={(e) => setCommunityName(e.target.value)}\n                    className=\"w-full rounded-[18px] mt-2.5 px-5 py-3.5 outline-none transition-all\n                             bg-gray-50 border border-gray-200 text-gray-900 focus:border-gray-300\n                             dark:bg-[#1c1c1c]/50 dark:border-white/10 dark:text-white dark:focus:border-[#EDEDED]/60\"\n                  />\n                </div>\n              </div>\n\n              {/* Pricing Tabs */}\n              <div className=\"space-y-2\">\n                <label className=\"text-[14px] ml-1 text-gray-500 dark:text-[#8A8A8A]\">Pricing & Access</label>\n                <div className=\"grid grid-cols-3 mt-2.5 rounded-full p-1 relative\n                              bg-gray-100 border border-gray-200\n                              dark:bg-[#0A0A0A] dark:border-white/5\">\n                  {pricingOptions.map((option) => (\n                    <button\n                      key={option}\n                      onClick={() => setPricing(option)}\n                      className={`relative z-10 py-3.5 text-[11px] sm:text-[12px] font-normal tracking-widest transition-colors duration-300 ${pricing === option\n                        ? 'text-gray-900 dark:text-[#EDEDED]'\n                        : 'text-gray-400 dark:text-[#EDEDED]/80'\n                        }`}\n                    >\n                      {option}\n                      {pricing === option && (\n                        <motion.div\n                          layoutId=\"activeTab\"\n                          className=\"absolute inset-0 rounded-full -z-10\n                                   bg-white border border-gray-200 shadow-sm\n                                   dark:bg-[#272727] dark:border-white/10\"\n                          transition={{ type: \"spring\", bounce: 0.15, duration: 0.5 }}\n                        />\n                      )}\n                    </button>\n                  ))}\n                </div>\n              </div>\n\n              {/* Toggle Section */}\n              <div className=\"flex items-center justify-between rounded-[18px] px-4 py-4\n                            bg-gray-50 border border-gray-200\n                            dark:bg-[#1C1C1C] dark:border-white/10\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-[15px] sm:text-[16px] text-gray-500 dark:text-[#BCBCBC]\">Application required</span>\n                  <Info size={16} className=\"cursor-help text-gray-400 dark:text-[#666666]\" />\n                </div>\n                <button title='switch'\n                  onClick={() => setIsApplicationRequired(!isApplicationRequired)}\n                  className={`w-10 h-6 rounded-full transition-colors duration-300 relative ${isApplicationRequired\n                    ? 'bg-black dark:bg-white/80'\n                    : 'bg-gray-200 dark:bg-[#333333]'\n                    }`}\n                >\n                  <motion.div\n                    animate={{ x: isApplicationRequired ? 19 : 2 }}\n                    transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n                    className={`absolute top-0.5 w-5 h-5 rounded-full transition-colors ${isApplicationRequired\n                      ? 'bg-white dark:bg-[#333333]'\n                      : 'bg-white'\n                      }`}\n                  />\n                </button>\n              </div>\n\n              <p className=\"text-center text-[13px] sm:text-[14px] pt-2 text-gray-400 dark:text-[#666666]\">\n                By creating a community, you agree to Payper's{' '}\n                <span className=\"underline cursor-pointer text-gray-500 dark:text-[#888888]\">Community Guidelines</span>\n              </p>\n            </div>\n\n            {/* Footer Buttons */}\n            <div className=\"flex flex-col-reverse sm:flex-row items-center justify-end gap-3 mt-8 sm:mt-10\">\n              <button\n                onClick={onClose}\n                className=\"w-full sm:w-auto px-8 py-3 rounded-full text-[14px] font-medium transition-colors\n                         border border-gray-200 text-gray-600 hover:bg-gray-50\n                         dark:border-white/40 dark:text-white dark:hover:bg-white/5\"\n              >\n                Cancel\n              </button>\n              <button\n                onClick={() => onCreate({ communityName, pricing, isApplicationRequired })}\n                className=\"w-full sm:w-auto px-8 py-3 rounded-full text-[14px] font-bold transition-all active:scale-95\n                         bg-black text-white hover:bg-gray-800\n                         dark:bg-white dark:text-black dark:hover:bg-[#eeeeee]\"\n              >\n                Create community\n              </button>\n            </div>\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};"
    }
  ]
}