{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "unsave-popup-demo",
  "type": "registry:example",
  "description": "Example of the kl-ui unsave-popup component.",
  "registryDependencies": [
    "https://karrix.dev/r/unsave-popup"
  ],
  "files": [
    {
      "path": "registry/kl-ui/unsave-popup/unsave-popup-demo.tsx",
      "content": "import { Label } from \"@/components/ui/label\";\nimport { X, Info } from \"lucide-react\";\nimport { Input } from \"@/components/ui/input\";\nimport { useState, useCallback, useMemo } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { UnsavePopup } from \"@/components/kl-ui/unsave-popup\";\nimport { cn } from \"@/lib/utils\";\n\nexport function UnsavePopupDemo() {\n  const [value, setValue] = useState(\"\");\n  const [showPopup, setShowPopup] = useState(false);\n  const [shouldBlockNav, setShouldBlockNav] = useState(false);\n  const [closeForm, setCloseForm] = useState(false);\n  const [isSaved, setIsSaved] = useState(false);\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(e.target.value);\n      setShowPopup(true);\n      setIsSaved(false);\n    },\n    []\n  );\n\n  const handleSave = useCallback(async () => {\n    await new Promise((resolve) => setTimeout(resolve, 1000));\n    setShowPopup(false);\n    setIsSaved(true);\n  }, []);\n\n  const handleReset = useCallback(() => {\n    setValue(\"\");\n    setShowPopup(false);\n    setShouldBlockNav(false);\n  }, []);\n\n  const handleCloseFormClick = useCallback(() => {\n    if (value && !isSaved) {\n      setShouldBlockNav(true);\n      setTimeout(() => setShouldBlockNav(false), 100);\n      return;\n    }\n    setCloseForm(true);\n  }, [value, isSaved]);\n\n  const shouldBlockFn = useCallback(() => shouldBlockNav, [shouldBlockNav]);\n\n  const formContent = useMemo(\n    () => (\n      <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n        <Label htmlFor=\"name\" className=\"font-medium\">\n          Name\n        </Label>\n        <Input\n          placeholder=\"Type anything to trigger it...\"\n          value={value}\n          className=\"text-sm\"\n          onChange={handleInputChange}\n        />\n      </div>\n    ),\n    [value, handleInputChange]\n  );\n\n  const popupContent = useMemo(\n    () => (\n      <>\n        <Info className=\"h-4 w-4\" /> Try to press the &quot;x&quot; to close it!\n      </>\n    ),\n    []\n  );\n\n  return (\n    <>\n      {!closeForm && (\n        <div\n          key=\"preview\"\n          className=\"flex flex-col h-full items-center justify-center p-2\"\n        >\n          <div\n            className={cn(\n              \"flex items-center justify-center p-4 gap-2 border border-gray-200\",\n              \"rounded-lg w-full max-w-[500px] h-[300px] shadow-md relative\"\n            )}\n          >\n            {formContent}\n            <div className=\"absolute top-1 right-1\">\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={handleCloseFormClick}\n                className=\"rounded-full hover:bg-transparent\"\n              >\n                <X className=\"h-4 w-4 text-gray-500\" />\n              </Button>\n            </div>\n          </div>\n        </div>\n      )}\n\n      <UnsavePopup\n        onSave={handleSave}\n        onReset={handleReset}\n        shouldBlockFn={shouldBlockFn}\n        show={showPopup}\n        className=\"w-full\"\n      >\n        {popupContent}\n      </UnsavePopup>\n    </>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/unsave-popup-demo.tsx"
    }
  ]
}