TimelineSlider TimelineMarker.tsx

0% Statements 0/3

0% Branches 0/6

0% Functions 0/1

0% Lines 0/3

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from 'react';
 
import './styles.scss';
 
type TimelineMarkerProps = {
  color: string;
  labelBottom?: string;
  labelTop?: string;
  onClick?: () => void;
  size: 'small' | 'medium' | 'large';
  value: number;
};
 
const TimelineMarker = ({ color, labelBottom, labelTop, onClick, size, value }: TimelineMarkerProps): JSX.Element => {
  const clampedValue = Math.min(1, Math.max(0, value));
 
  return (
    <div
      className={`timeline-marker timeline-marker--${size} ${onClick ? 'timeline-marker--clickable' : ''}`}
      style={{
        left: `${clampedValue * 100}%`,
        backgroundColor: color,
      }}
      onClick={onClick}
    >
      {labelTop && <div className='timeline-marker__label timeline-marker__label--top'>{labelTop}</div>}
      {labelBottom && <div className='timeline-marker__label timeline-marker__label--bottom'>{labelBottom}</div>}
    </div>
  );
};
 
export default TimelineMarker;