18 lines
3.2 KiB
JSON
18 lines
3.2 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "input-button-loading-demo",
|
|
"type": "registry:ui",
|
|
"title": "Input Button Loading Demo",
|
|
"description": "Demo showing an animated button with input effect.",
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/input-button"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/demo/buttons/input-loading/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport {\n InputButton,\n InputButtonAction,\n InputButtonProvider,\n InputButtonSubmit,\n InputButtonInput,\n} from '@/components/animate-ui/buttons/input';\nimport { Check, Loader2 } from 'lucide-react';\nimport { motion } from 'motion/react';\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nexport const InputButtonLoadingDemo = () => {\n const [showInput, setShowInput] = React.useState(false);\n const [pending, startTransition] = React.useTransition();\n const [success, setSuccess] = React.useState(false);\n const [value, setValue] = React.useState('');\n\n const handleSubmit = React.useCallback(\n (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n\n if (!showInput) {\n setShowInput(true);\n return;\n }\n\n startTransition(async () => {\n await sleep(2000);\n setSuccess(true);\n await sleep(2000);\n setSuccess(false);\n setShowInput(false);\n setValue('');\n });\n },\n [showInput, setShowInput, setSuccess, setValue],\n );\n\n return (\n <form\n onSubmit={handleSubmit}\n className=\"w-full flex items-center justify-center\"\n >\n <InputButtonProvider showInput={showInput} setShowInput={setShowInput}>\n <InputButton>\n <InputButtonAction onClick={() => {}}>\n Join the newsletter\n </InputButtonAction>\n <InputButtonSubmit\n onClick={() => {}}\n type=\"submit\"\n disabled={pending}\n className={pending || success ? 'aspect-square px-0' : ''}\n >\n {success ? (\n <motion.span\n key=\"success\"\n initial={{ opacity: 0, scale: 0 }}\n animate={{ opacity: 1, scale: 1 }}\n transition={{ duration: 0.2 }}\n >\n <Check />\n </motion.span>\n ) : pending ? (\n <motion.span\n key=\"pending\"\n initial={{ opacity: 0, scale: 0 }}\n animate={{ opacity: 1, scale: 1 }}\n transition={{ duration: 0.2 }}\n >\n <Loader2 className=\"animate-spin\" />\n </motion.span>\n ) : (\n 'Subscribe'\n )}\n </InputButtonSubmit>\n </InputButton>\n <InputButtonInput\n type=\"email\"\n placeholder=\"your-email@example.com\"\n value={value}\n onChange={(e) => setValue(e.target.value)}\n disabled={pending}\n autoFocus\n />\n </InputButtonProvider>\n </form>\n );\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/demo/buttons/input-loading.tsx"
|
|
}
|
|
]
|
|
} |