Partition Bar

1import PartitionBar, {
2  PartitionBarSegment,
3  PartitionBarSegmentTitle,
4  PartitionBarSegmentValue
5} from "@/registry/8starlabs-ui/blocks/partition-bar";
6 
7export default function PartitionBarVariantsDemo() {
8  return (
9    <PartitionBar size="md">
10      <PartitionBarSegment num={3} variant="default">
11        <PartitionBarSegmentTitle>Apples</PartitionBarSegmentTitle>
12        <PartitionBarSegmentValue>300kg</PartitionBarSegmentValue>
13      </PartitionBarSegment>
14 
15      <PartitionBarSegment num={2} variant="secondary">
16        <PartitionBarSegmentTitle>Oranges</PartitionBarSegmentTitle>
17        <PartitionBarSegmentValue>200kg</PartitionBarSegmentValue>
18      </PartitionBarSegment>
19 
20      <PartitionBarSegment num={3} variant="destructive">
21        <PartitionBarSegmentTitle>Bananas</PartitionBarSegmentTitle>
22        <PartitionBarSegmentValue>300kg</PartitionBarSegmentValue>
23      </PartitionBarSegment>
24 
25      <PartitionBarSegment num={2} variant="outline">
26        <PartitionBarSegmentTitle>Pears</PartitionBarSegmentTitle>
27        <PartitionBarSegmentValue>200kg</PartitionBarSegmentValue>
28      </PartitionBarSegment>
29 
30      <PartitionBarSegment num={3} variant="muted">
31        <PartitionBarSegmentTitle>Mangoes</PartitionBarSegmentTitle>
32        <PartitionBarSegmentValue>300kg</PartitionBarSegmentValue>
33      </PartitionBarSegment>
34    </PartitionBar>
35  );
36}