feishin/src/renderer/components/select/index.tsx

import type {
    SelectProps as MantineSelectProps,
    MultiSelectProps as MantineMultiSelectProps,
} from '@mantine/core';
import { Select as MantineSelect, MultiSelect as MantineMultiSelect } from '@mantine/core';
import styled from 'styled-components';

interface SelectProps extends MantineSelectProps {
    maxWidth?: number | string;
    width?: number | string;
}

export interface MultiSelectProps extends MantineMultiSelectProps {
    maxWidth?: number | string;
    width?: number | string;
}

const StyledSelect = styled(MantineSelect)`
    & [data-selected='true'] {
        background: var(--input-bg);
    }

    & [data-disabled='true'] {
        background: var(--input-bg);
        opacity: 0.6;
    }

    & .mantine-Select-itemsWrapper {
        & .mantine-Select-item {
            padding: 40px;
        }
    }
`;

export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
    return (
        <StyledSelect
            withinPortal
            styles={{
                dropdown: {
                    background: 'var(--dropdown-menu-bg)',
                    filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
                },
                input: {
                    background: 'var(--input-bg)',
                    color: 'var(--input-fg)',
                },
                item: {
                    '&:hover': {
                        background: 'var(--dropdown-menu-bg-hover)',
                    },
                    '&[data-hovered]': {
                        background: 'var(--dropdown-menu-bg-hover)',
                    },
                    '&[data-selected="true"]': {
                        '&:hover': {
                            background: 'var(--dropdown-menu-bg-hover)',
                        },
                        background: 'none',
                        color: 'var(--primary-color)',
                    },
                    color: 'var(--dropdown-menu-fg)',
                    padding: '.3rem',
                },
            }}
            sx={{ maxWidth, width }}
            transitionProps={{ duration: 100, transition: 'fade' }}
            {...props}
        />
    );
};

const StyledMultiSelect = styled(MantineMultiSelect)`
    & [data-selected='true'] {
        background: var(--input-select-bg);
    }

    & [data-disabled='true'] {
        background: var(--input-bg);
        opacity: 0.6;
    }

    & .mantine-MultiSelect-itemsWrapper {
        & .mantine-Select-item {
            padding: 40px;
        }
    }
`;

export const MultiSelect = ({ width, maxWidth, ...props }: MultiSelectProps) => {
    return (
        <StyledMultiSelect
            withinPortal
            styles={{
                dropdown: {
                    background: 'var(--dropdown-menu-bg)',
                    filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
                },
                input: {
                    background: 'var(--input-bg)',
                    color: 'var(--input-fg)',
                },
                item: {
                    '&:hover': {
                        background: 'var(--dropdown-menu-bg-hover)',
                    },
                    '&[data-hovered]': {
                        background: 'var(--dropdown-menu-bg-hover)',
                    },
                    '&[data-selected="true"]': {
                        '&:hover': {
                            background: 'var(--dropdown-menu-bg-hover)',
                        },
                        background: 'none',
                        color: 'var(--primary-color)',
                    },
                    color: 'var(--dropdown-menu-fg)',
                    padding: '.5rem .1rem',
                },
                value: {
                    margin: '.2rem',
                    paddingBottom: '1rem',
                    paddingLeft: '1rem',
                    paddingTop: '1rem',
                },
            }}
            sx={{ maxWidth, width }}
            transitionProps={{ duration: 100, transition: 'fade' }}
            {...props}
        />
    );
};

Select.defaultProps = {
    maxWidth: undefined,
    width: undefined,
};

MultiSelect.defaultProps = {
    maxWidth: undefined,
    width: undefined,
};