Partition Bar

1import PartitionBar, {
2  PartitionBarSegment,
3  PartitionBarSegmentTitle,
4  PartitionBarSegmentValue
5} from "@/registry/8starlabs-ui/blocks/partition-bar";
6 
7export default function PartitionBarAlignmentDemo() {
8  return (
9    <PartitionBar size="md">
10      <PartitionBarSegment num={4} alignment="left">
11        <PartitionBarSegmentTitle>Start</PartitionBarSegmentTitle>
12        <PartitionBarSegmentValue>40</PartitionBarSegmentValue>
13      </PartitionBarSegment>
14 
15      <PartitionBarSegment num={2} alignment="center" variant="secondary">
16        <PartitionBarSegmentTitle>Middle</PartitionBarSegmentTitle>
17        <PartitionBarSegmentValue>20</PartitionBarSegmentValue>
18      </PartitionBarSegment>
19 
20      <PartitionBarSegment num={4} alignment="right" variant="muted">
21        <PartitionBarSegmentTitle>End</PartitionBarSegmentTitle>
22        <PartitionBarSegmentValue>40</PartitionBarSegmentValue>
23      </PartitionBarSegment>
24    </PartitionBar>
25  );
26}