Partition Bar

1import PartitionBar, {
2  PartitionBarSegment,
3  PartitionBarSegmentTitle,
4  PartitionBarSegmentValue
5} from "@/registry/8starlabs-ui/blocks/partition-bar";
6 
7export default function PartitionBarWidthDemo() {
8  return (
9    <PartitionBar size="md" className="md:w-[70%] sm:w-[90%] mx-auto">
10      <PartitionBarSegment num={3}>
11        <PartitionBarSegmentTitle>Apples</PartitionBarSegmentTitle>
12        <PartitionBarSegmentValue>30%</PartitionBarSegmentValue>
13      </PartitionBarSegment>
14 
15      <PartitionBarSegment num={7} variant="secondary">
16        <PartitionBarSegmentTitle>Oranges</PartitionBarSegmentTitle>
17        <PartitionBarSegmentValue>70%</PartitionBarSegmentValue>
18      </PartitionBarSegment>
19    </PartitionBar>
20  );
21}