Counter

// src/components/ui/demo.tsx

import { Component } from "@/components/ui/counter";

const DemoOne = () => {
  return (
    // The parent div uses Tailwind's dark mode classes to change its background.
    // This allows the component's internal theme to be clearly visible against the appropriate background.
    <div className="flex w-full h-screen justify-center items-center bg-black dark:bg-white transition-colors duration-300">
      <Component
        initialValue={5}
        places={[100, 10, 1]}
        fontSize={80}
        padding={5}
        fontWeight={900}
        min={0}
        max={999}
        step={1}
      />
    </div>
  );
};

export { DemoOne };