tasarım,
kodda
biter.

src components CheckoutButton.tsx

1. 1export function CheckoutButton({ onPay }: Props) {
2. 2 const t = useTranslations("checkout");
3. 3 const [status, setStatus] = useState<Status>("idle");
4. 4
5. 5 return (
6. 6 <motion.button
7. 7 whileTap={{ scale: 0.96 }}
8. 8 transition={SPRING_PRESS}
9. 9 className="h-12 gap-2 rounded-2xl px-6"
10. 10 disabled={status === "processing"}
11. 11 onClick={() => submitPayment(onPay, setStatus)}
12. 12 >
13. 13 {status === "processing" && <Spinner />}
14. 14 {t(status === "success" ? "paid" : "pay")}
15. 15 </motion.button>
16. 16 );
17. 17}
18. 18// Spacing tokens: card 24, inset 16, button height 48.
19. 19const SPRING_PRESS: Transition = {
20. 20 type: "spring", stiffness: 420, damping: 26,
21. 21};