import { useRef, useState } from "react"
import { Search } from "blue-react"

export default function SearchExample() {
    const [value, setValue] = useState("")
    const inputRef = useRef<HTMLInputElement>(null)

    return (
        <>
            <Search
                inputRef={inputRef}
                className="w-50"
                onChange={({ target }) => setValue(target.value)}
                onSubmit={() => alert("Do form submit now!")}
                placeholder="Begin typing..."
                reset
                value={value}
            />

            <button
                type="button"
                className="btn btn-secondary mt-3"
                onClick={() => {
                    inputRef.current?.focus()
                }}
            >
                Set focus from outside using ref
            </button>
        </>
    )
}

import { Search } from "blue-react"

export default function SearchNoRoundingExample() {
    return <Search noRounding />
}