Button

// If you're using Next.js (App Router) and this preview is interactive,
// add: "use client"

import * as React from "react"
import Button from "./button"

const Preview = () => {
    const [count, setCount] = React.useState(0)
    const [disabled, setDisabled] = React.useState(false)

    return (
        <div className="space-y-4">
            <div className="flex flex-wrap items-center gap-3">
                <Button onClick={() => setCount((c) => c + 1)}>
                    Click me ({count})
                </Button>
                <Button variant="secondary" onClick={() => setDisabled((d) => !d)}>
                    Toggle disabled
                </Button>
                <Button disabled={disabled} onClick={() => setCount((c) => c + 1)}>
                    {disabled ? "Disabled" : "Enabled"}
                </Button>
            </div>

            <div className="flex flex-wrap items-center gap-3">
                <Button className="px-6 py-3 text-base" onClick={() => setCount((c) => c + 1)}>
                    Custom className
                </Button>
                <Button variant="secondary" className="rounded-full">
                    Rounded
                </Button>
            </div>
        </div>
    )
}

export default Preview