@lunit/oui/dist/presentations/Histogram/HistogramTabs.js

Lunit Oncology UI components

import { jsx as _jsx } from "react/jsx-runtime";
import { calculateFontSize, doBorderRadius } from './Histogram.utils';
import { HistogramTabsContainer, TabButton } from './Histogram.styled';
import { EllipsisTypography } from '../../components';
const HistogramTabs = ({ options, active, onChange }) => {
    return (_jsx(HistogramTabsContainer, { children: options.map((tabLabel, idx) => {
            const fontSize = calculateFontSize(tabLabel);
            return (_jsx(TabButton, { disableRipple: true, active: idx === active, onClick: () => onChange(idx), sx: {
                    padding: '4px 6px',
                    borderRadius: doBorderRadius(idx, options.length),
                }, children: _jsx(EllipsisTypography, { variant: "body_sb1", sx: {
                        fontSize: `${fontSize}px`,
                    }, children: tabLabel }) }, tabLabel));
        }) }));
};
export default HistogramTabs;