Search.tsx

import ArrowCircleRightRoundedIcon from '@mui/icons-material/ArrowCircleRightRounded';
import SearchIcon from '@mui/icons-material/Search';
import { Container, IconButton, InputAdornment, TextField } from '@mui/material';

export default function SearchInput() {
    const handleSearch = (event: { target: { value: any; }; }) => {
        const searchText = event.target.value;
        console.log('Search:', searchText);
    };

    return (
        <Container maxWidth="sm" sx={{ justifyContent: "center", textAlign: "center" }}>
            <TextField
                placeholder="Search"
                variant="outlined"
                size="small"
                onChange={handleSearch}
                InputProps={{
                    startAdornment: (
                        <InputAdornment position="start">
                            <SearchIcon />
                        </InputAdornment>
                    ),
                    endAdornment: (
                        <InputAdornment position="end">
                            <IconButton edge="end" aria-label="start search">
                                <ArrowCircleRightRoundedIcon />
                            </IconButton>
                        </InputAdornment>
                    ),
                    style: {
                        borderRadius: '999px',
                    },
                }}
            />
        </Container>
    );
};