v3/packages/design-system/atoms/horizontal-switch/HorizontalSwitch.tsx

import * as React from 'react';
import { Item, Wrapper } from './HorizontalSwitch.styled';

export type SwitchProps = {
    items: string[];
    value: string;
    onChange: (value: string) => void;
};

export const HorizontalSwitch = (props: SwitchProps) => {
    const handleClick = (item: typeof props.value) => () => {
        props.onChange?.(item);
    };

    return (
        <Wrapper>
            {props.items.map((item, idx) => (
                <Item
                    key={idx}
                    selected={item === props.value}
                    onClick={handleClick(item)}
                >
                    {item}
                </Item>
            ))}
        </Wrapper>
    );
};