Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 1x 5x 5x 15x 5x | import React, { type JSX, useMemo } from 'react';
import { toConicGradient } from './layout';
import './styles.scss';
import type { ColorWeight } from './types';
type TimelineDotProps = {
ariaLabel?: string;
colorWeights: ColorWeight[];
dimmed: boolean;
leftPx: number;
markCount: number;
onClick: () => void;
selected: boolean;
sizePx: number;
};
const TimelineDot = ({
ariaLabel,
colorWeights,
dimmed,
leftPx,
markCount,
onClick,
selected,
sizePx,
}: TimelineDotProps): JSX.Element => {
const background = useMemo(() => toConicGradient(colorWeights), [colorWeights]);
const className = [
'timeline-v2-dot',
dimmed ? 'timeline-v2-dot--dimmed' : '',
selected ? 'timeline-v2-dot--selected' : '',
]
.filter((entry) => entry !== '')
.join(' ');
return (
<button
aria-label={ariaLabel}
className={className}
style={{ background, height: `${sizePx}px`, left: `${leftPx}px`, width: `${sizePx}px` }}
onClick={onClick}
type='button'
>
{markCount > 1 && <span className='timeline-v2-dot__count'>{markCount}</span>}
</button>
);
};
export default TimelineDot;
|