suwayomi-material-you-webui/src/components/atoms/SearchTextField.tsx

/*
 * Copyright (C) Contributors to the Suwayomi project
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

import TextField, { TextFieldProps } from '@mui/material/TextField';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import CancelIcon from '@mui/icons-material/Cancel';

export const SearchTextField = ({ onCancel, ...textFieldProps }: TextFieldProps & { onCancel: () => void }) => (
    <TextField
        {...textFieldProps}
        slotProps={{
            input: {
                ...textFieldProps.InputProps,
                endAdornment: textFieldProps.InputProps?.endAdornment ?? (
                    <InputAdornment position="end">
                        <IconButton onClick={() => onCancel()}>
                            <CancelIcon />
                        </IconButton>
                    </InputAdornment>
                ),
            },
        }}
    />
);