usage-meter-05

1'use client'
2import { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'
3import {
4  SegmentedProgressBar,
5  SegmentedProgressBarProps,
6} from '@/registry/components/dashboardblocks/progress-bar'
7import { UsageMeterValue } from '@/registry/components/dashboardblocks/usage-meter'
8 
9import { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card'
10 
11interface UsageMeter5Props {
12  segments: SegmentedProgressBarProps['segments']
13  title: string
14  total: number
15  unit: string
16}
17 
18const exampleProps: UsageMeter5Props = {
19  segments: [
20    { label: 'Documents', value: 12.4, color: 'hsl(221 83% 53%)' },
21    { label: 'Images', value: 28.6, color: 'hsl(262 83% 58%)' },
22    { label: 'Videos', value: 18.2, color: 'hsl(330 81% 60%)' },
23    { label: 'Other', value: 8.3, color: 'hsl(35 91% 50%)' },
24  ],
25  title: 'Storage Breakdown',
26  total: 100,
27  unit: 'GB',
28}
29 
30const UsageMeter5 = (props: UsageMeter5Props) => {
31  const { segments, title, total, unit } = props
32  const used = segments.reduce((acc, s) => acc + s.value, 0)
33  const free = total - used
34 
35  return (
36    <Card>
37      <CardContent className='space-y-4'>
38        <div className='flex items-center justify-between'>
39          <CardTitle className='text-base font-medium'>{title}</CardTitle>
40          <CardDescription>
41            {free.toFixed(1)} {unit} free
42          </CardDescription>
43        </div>
44        <div className='space-y-1'>
45          <div className='flex items-baseline justify-between'>
46            <UsageMeterValue>
47              <AnimatedNumber value={used} formatter={(value) => value.toFixed(1)} />{' '}
48              {unit}
49            </UsageMeterValue>
50            <span className='text-sm text-muted-foreground'>
51              of {total} {unit}
52            </span>
53          </div>
54          <SegmentedProgressBar segments={segments} total={total} />
55        </div>
56        <div className='grid grid-cols-2 gap-x-3 gap-y-2'>
57          {segments.map((segment) => (
58            <div key={segment.label} className='flex items-center gap-2'>
59              <div
60                className='h-2.5 w-2.5 rounded-full'
61                style={{ backgroundColor: segment.color }}
62              />
63              <span className='text-sm text-muted-foreground'>{segment.label}</span>
64              <span className='ml-auto text-sm font-medium'>
65                <AnimatedNumber
66                  value={segment.value}
67                  formatter={(value) => value.toFixed(1)}
68// … truncated