"use client"; import { useCounter } from "@/components/hooks/use-counter"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Plus, Minus, RotateCcw, X, DivideSquare, Calculator, } from "lucide-react"; function UseCounterDemo() { const { count, setCount, increment, decrement, reset } = useCounter(0); const multiplyBy2 = () => setCount((x) => x * 2); const divideBy2 = () => setCount((x) => Math.floor(x / 2)); return (

{/* Left Column - Interactive Demo */}

Counter Controls

Experiment with different counter operations

{/* Counter Display */}

{count}

setCount(Number(e.target.value))} className="w-32 text-center" />

{/* Basic Controls */}

{/* Advanced Controls */}

{/* Right Column - Documentation */}

About useCounter

A flexible hook for managing numeric counter state with helpful utilities.

              {`const {
  count,      // current value
  increment,  // () => void
  decrement,  // () => void
  reset,      // () => void
  setCount    // Dispatch>
} = useCounter(0) // initial value`}

Features

Customizable initial value
Increment/decrement utilities
Reset functionality
Direct state control

Common Use Cases

Quantity selectors
Pagination controls
Step indicators
Score tracking

All operations are memoized for performance

); } export { UseCounterDemo };