Counter

"use client";

import { useState } from "react";
import Counter from "@/components/vritti/counter";

export function CounterExample() {
  const [value, setValue] = useState(1234);

  return (
    <div className="relative flex h-[400px] w-full flex-col items-center justify-center gap-6 overflow-hidden rounded-lg border">
      <Counter value={value} />
      <div className="flex gap-2">
        <button
          onClick={() => setValue((v) => v - 100)}
          className="rounded-md border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-accent"
        >
          -100
        </button>
        <button
          onClick={() => setValue(Math.floor(Math.random() * 9999))}
          className="rounded-md border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-accent"
        >
          Random
        </button>
        <button
          onClick={() => setValue((v) => v + 100)}
          className="rounded-md border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-accent"
        >
          +100
        </button>
      </div>
    </div>
  );
}