import { useCallback, useState } from "react" import { AnimatePresence, motion } from "motion/react" import { Button } from "@/components/ui/button" import AnimatedPathText from "@/components/fancy/text/text-along-path" export default function Preview() { // Rounded rectangle path const rectPath = "M 20,20 L 180,20 A 20,20 0 0,1 200,40 L 200,160 A 20,20 0 0,1 180,180 L 20,180 A 20,20 0 0,1 0,160 L 0,40 A 20,20 0 0,1 20,20" const [buttonState, setButtonState] = useState< "idle" | "loading" | "success" >("idle") const [email, setEmail] = useState("") const buttonCopy = { idle: "Subscribe", loading: ( ), success: "Done ✓", } as const const handleSubmit = useCallback(() => { if (buttonState === "success") return setButtonState("loading") setTimeout(() => { setButtonState("success") }, 1750) setTimeout(() => { setButtonState("idle") setEmail("") }, 3500) }, [buttonState]) return (

{/* This is just fluff for the demo */}

setEmail(e.target.value)} className="w-full px-3 py-2 sm:px-4 sm:py-2 border border-[#0015ff] focus:outline-hidden focus:ring-primary-blue/50 font-azeret-mono text-xs sm:text-base placeholder:text-[#0015ff] rounded-lg bg-white" />

) }

Text Along Path Demo

Instalação

Dependências

Registry dependencies