Search bars

    
    "use client"  // for nextJS
    import { useState } from 'react';
    import { SearchBar1,SearchBar2 } from 'mvk-ui';

    const App = () => {
        const [searchValue, setSearchValue] = useState('');

        const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
            setSearchValue(event.target.value);
        };

        const handleSearch = () => {
            console.log('Search:', searchValue);
        };

        return (
            <div style={{ margin: '50px' }}>
                <SearchBar1 
                    placeholder="Search..." 
                    value={searchValue} 
                    onChange={handleSearchChange} 
                    onSearch={handleSearch} 
                    textColor="#333" 
                    backgroundColor="#fff" 
                    width='400px'
                />
                <SearchBar2 
                    placeholder="Search..." 
                    value={searchValue} 
                    onChange={handleSearchChange} 
                    onSearch={handleSearch} 
                    textColor="#333" 
                    backgroundColor="#fff" 
                    width='400px'
                />
            </div>
        );
    };

    export default App;

    

Copy code