Partition Bar

1import PartitionBar, {
2  PartitionBarSegment,
3  PartitionBarSegmentTitle,
4  PartitionBarSegmentValue
5} from "@/registry/8starlabs-ui/blocks/partition-bar";
6 
7export default function PartitionBarCustomColoursDemo() {
8  return (
9    <PartitionBar size="md">
10      <PartitionBarSegment num={6} className="bg-purple-600">
11        <PartitionBarSegmentTitle className="text-purple-600">
12          Custom 1
13        </PartitionBarSegmentTitle>
14        <PartitionBarSegmentValue>111</PartitionBarSegmentValue>
15      </PartitionBarSegment>
16 
17      <PartitionBarSegment num={5} className="bg-amber-800">
18        <PartitionBarSegmentTitle className="text-cyan-600">
19          Custom 2
20        </PartitionBarSegmentTitle>
21        <PartitionBarSegmentValue className="text-red-700">
22          222
23        </PartitionBarSegmentValue>
24      </PartitionBarSegment>
25 
26      <PartitionBarSegment num={4} variant="outline">
27        <PartitionBarSegmentTitle>Default</PartitionBarSegmentTitle>
28        <PartitionBarSegmentValue>333</PartitionBarSegmentValue>
29      </PartitionBarSegment>
30    </PartitionBar>
31  );
32}