Shake Demo

1"use client";
2 
3import { useState } from "react";
4import Shake from "../blocks/shake";
5 
6export default function ShakeDemo() {
7  const [code, setCode] = useState("");
8  const [errors, setErrors] = useState(0);
9 
10  return (
11    <form
12      onSubmit={(e) => {
13        e.preventDefault();
14        if (code !== "1234") {
15          setErrors((n) => n + 1);
16          setCode("");
17        }
18      }}
19    >
20      <Shake signal={errors} className="flex flex-col items-center gap-3">
21        <input
22          value={code}
23          onChange={(e) => setCode(e.target.value)}
24          inputMode="numeric"
25          placeholder="Enter 1234"
26          className="h-10 w-40 rounded-md border bg-background px-3 text-center text-sm tracking-[0.3em] outline-none focus-visible:ring-2 focus-visible:ring-ring"
27        />
28        <button
29          type="submit"
30          className="h-9 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90"
31        >
32          Verify
33        </button>
34      </Shake>
35    </form>
36  );
37}