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

Lunit Oncology UI components

import { jsx as _jsx } from "react/jsx-runtime";
import { Typography } from '@mui/material';
import { calculateFontSize, doBorderRadius } from './Histogram.utils';
import { HistogramTabsContainer, TabButton } from './Histogram.styled';
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(Typography, { variant: "body_sb1", sx: {
                        fontSize: `${fontSize}px`,
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        width: '100%',
                    }, children: tabLabel }) }, tabLabel));
        }) }));
};
export default HistogramTabs;