Untitled

type Placeholder<TOption> = { label: string; value: TOption } | string;

type SingleValueProps<TOption> = {
    onChange?: (value: TOption) => void;
    value: TOption;
};

type MultipleValueProps<TOption> = SingleValueProps<TOption[]>;
type DropdownOptionsBoxProps<TOption> = {
    placeholder: Placeholder<TOption>;
} & (SingleValueProps<TOption> | MultipleValueProps<TOption>);

const DropdownOptionsBox = <TOption,>(props: DropdownOptionsBoxProps<TOption>) => {
    return <Checkbox onChange={props.onChange}>{props.value}</Checkbox>;
};

type DropdownProps<TOption> = {
    placeholder: Placeholder<TOption>;
    onChange?: (value: TOption) => void;
    value: TOption;
};

const Dropdown = <TOption,>(props: DropdownProps<TOption>) => {
    return (
        <div>
            <DropdownOptionsBox
                placeholder={props.placeholder}
                value={props.value}
                onChange={props.onChange}
            />
        </div>
    );
};

type MultiselectDropdownProps<TOption> = {
    placeholder: Placeholder<TOption>;
    onChange?: (value: TOption[]) => void;
    value: TOption[];
};

const MultiselectDropdown = <TOption,>(props: MultiselectDropdownProps<TOption>) => {
    return (
        <div>
            <DropdownOptionsBox
                placeholder={props.placeholder}
                value={props.value}
                onChange={props.onChange}
            />
        </div>
    );
};