{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "create-community-base",
  "type": "registry:component",
  "title": "Create Community (base)",
  "description": "Theme-ready base variant of 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=\"theme-injected font-sans 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-background/70 backdrop-blur-sm\"\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-72 bg-primary/10 blur-[80px] rotate-[-15deg] rounded-full\"\n            />\n            <div className=\"absolute inset-0 bg-background/60\" />\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-2xl p-6 sm:p-7 shadow-2xl z-50 my-auto\n                       bg-card border-4 sm:border-8 border-border\"\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-foreground\">Create community</h2>\n                <p className=\"text-sm mt-3 sm:mt-4 leading-relaxed max-w-full text-muted-foreground\">\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-muted-foreground hover:text-foreground\"\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-sm ml-1 text-muted-foreground\">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-xl mt-3 px-5 py-3 outline-none transition-all\n                             bg-background border border-input text-foreground focus:border-ring\"\n                  />\n                </div>\n              </div>\n\n              {/* Pricing Tabs */}\n              <div className=\"space-y-2\">\n                <label className=\"text-sm ml-1 text-muted-foreground\">Pricing & Access</label>\n                <div className=\"grid grid-cols-3 mt-2.5 rounded-full p-1 relative\n                              bg-muted border border-border\">\n                  {pricingOptions.map((option) => (\n                    <button\n                      key={option}\n                      onClick={() => setPricing(option)}\n                      className={`relative z-10 py-3 text-xs font-normal tracking-widest transition-colors duration-300 ${pricing === option\n                        ? 'text-foreground'\n                        : 'text-muted-foreground'\n                        }`}\n                    >\n                      {option}\n                      {pricing === option && (\n                        <motion.div\n                          layoutId=\"activeTab\"\n                          className=\"absolute inset-0 rounded-full -z-10\n                                   bg-card border border-border shadow-sm\"\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-xl px-4 py-4\n                            bg-background border border-border\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-base text-muted-foreground\">Application required</span>\n                  <Info size={16} className=\"cursor-help text-muted-foreground\" />\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-primary'\n                    : 'bg-muted'\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-primary-foreground'\n                      : 'bg-card'\n                      }`}\n                  />\n                </button>\n              </div>\n\n              <p className=\"text-center text-sm pt-2 text-muted-foreground\">\n                By creating a community, you agree to Payper's{' '}\n                <span className=\"underline cursor-pointer text-foreground\">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-sm font-medium transition-colors\n                         border border-border text-foreground hover:bg-muted\"\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-sm font-bold transition-all active:scale-95\n                         bg-primary text-primary-foreground hover:bg-primary/90\"\n              >\n                Create community\n              </button>\n            </div>\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};"
    }
  ]
}