```jsx padded
import { useState } from 'react';

const fourSegmentProps = {
	segmentEnds: [60, 90, 98],
	data: [
		{ color: '#CE0D0D', label: '0 - 60%' },
		{ color: '#E1D77D', label: '60 - 90%' },
		{ color: '#50B058', label: '90 - 98%' },
		{ color: '#50B0ff', label: '98 - 100%' },
	],
};
const fiveSegmentProps = {
	segmentEnds: [20, 40, 60, 90],
	data: [
		{ color: '#CE0D0D', label: '0 - 20%' },
		{ color: '#E85A22', label: '20 - 40%' },
		{ color: '#E1D77D', label: '40 - 60%' },
		{ color: '#50B058', label: '60 - 90%' },
		{ color: '#50B0ff', label: '90 - 100%' },
	],
};

const value = 40;

<>
<h4 style={{color: 'white'}}> Value {value}</h4>
	<Gauge min={0} max={100} value={value} />
	<Gauge {...fourSegmentProps} min={0} max={100} value={value} />
	<Gauge {...fiveSegmentProps} min={0} max={100} value={value} />
</>;
```

A Gauge will take in `data` and `segmentEnds` to determine the number of equal sized segments to render