Partition Bar

1import PartitionBar, {
2  PartitionBarSegment,
3  PartitionBarSegmentTitle,
4  PartitionBarSegmentValue
5} from "@/registry/8starlabs-ui/blocks/partition-bar";
6 
7export default function PartitionBarSizeDemo() {
8  return (
9    <div className="space-y-6 w-full">
10      <PartitionBar size="sm" className="w-full">
11        <PartitionBarSegment num={4}>
12          <PartitionBarSegmentTitle>Small</PartitionBarSegmentTitle>
13          <PartitionBarSegmentValue>40</PartitionBarSegmentValue>
14        </PartitionBarSegment>
15        <PartitionBarSegment num={6} variant="secondary">
16          <PartitionBarSegmentTitle>Small</PartitionBarSegmentTitle>
17          <PartitionBarSegmentValue>60</PartitionBarSegmentValue>
18        </PartitionBarSegment>
19      </PartitionBar>
20 
21      <PartitionBar size="md" className="w-full">
22        <PartitionBarSegment num={4}>
23          <PartitionBarSegmentTitle>Medium</PartitionBarSegmentTitle>
24          <PartitionBarSegmentValue>40</PartitionBarSegmentValue>
25        </PartitionBarSegment>
26        <PartitionBarSegment num={6} variant="secondary">
27          <PartitionBarSegmentTitle>Medium</PartitionBarSegmentTitle>
28          <PartitionBarSegmentValue>60</PartitionBarSegmentValue>
29        </PartitionBarSegment>
30      </PartitionBar>
31 
32      <PartitionBar size="lg" className="w-full">
33        <PartitionBarSegment num={4}>
34          <PartitionBarSegmentTitle>Large</PartitionBarSegmentTitle>
35          <PartitionBarSegmentValue>40</PartitionBarSegmentValue>
36        </PartitionBarSegment>
37        <PartitionBarSegment num={6} variant="secondary">
38          <PartitionBarSegmentTitle>Large</PartitionBarSegmentTitle>
39          <PartitionBarSegmentValue>60</PartitionBarSegmentValue>
40        </PartitionBarSegment>
41      </PartitionBar>
42    </div>
43  );
44}