usage-meter-06

1'use client'
2import { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'
3import { Icon } from '@/registry/components/dashboardblocks/icon'
4import { ProgressBar } from '@/registry/components/dashboardblocks/progress-bar'
5import { Crown, Database, Mail, Users, Zap } from 'lucide-react'
6import type { LucideIcon } from 'lucide-react'
7 
8import { Button } from '@/components/ui/button'
9import { Card, CardContent, CardFooter, CardTitle } from '@/components/ui/card'
10 
11interface PlanLimit {
12  icon: LucideIcon
13  limit: number
14  name: string
15  used: number
16}
17 
18interface UsageMeter6Props {
19  limits: PlanLimit[]
20  plan: string
21}
22 
23const exampleProps: UsageMeter6Props = {
24  limits: [
25    { name: 'Team members', used: 4, limit: 5, icon: Users },
26    { name: 'API calls', used: 8500, limit: 10000, icon: Zap },
27    { name: 'Storage', used: 4.9, limit: 5, icon: Database },
28    { name: 'Emails sent', used: 450, limit: 1000, icon: Mail },
29  ],
30  plan: 'Pro',
31}
32 
33const UsageMeter6 = (props: UsageMeter6Props) => {
34  const { limits, plan } = props
35  return (
36    <Card>
37      <CardContent className='space-y-6'>
38        <div className='flex items-center gap-2'>
39          <Icon icon={Crown} size='md' />
40          <CardTitle className='text-base font-medium'>{plan} Plan</CardTitle>
41        </div>
42        <div className='space-y-3'>
43          {limits.map((item) => {
44            const percentage = (item.used / item.limit) * 100
45            const safePercentage = Number.isFinite(percentage) ? percentage : 0
46            const normalized = Math.min(100, Math.max(0, safePercentage))
47            const fillClassName =
48              normalized >= 95
49                ? 'bg-destructive'
50                : normalized >= 80
51                  ? 'bg-amber-500'
52                  : 'bg-emerald-500'
53            const formattedLimit =
54              item.limit >= 1000
55                ? `${(item.limit / 1000).toFixed(0)}k`
56                : item.limit.toString()
57 
58            return (
59              <div key={item.name} className='space-y-1'>
60                <div className='flex items-end justify-between text-sm'>
61                  <div className='flex items-center gap-2'>
62                    <item.icon className='h-3.5 w-3.5' />
63                    <span>{item.name}</span>
64                  </div>
65                  <span className='text-xs text-muted-foreground'>
66                    <AnimatedNumber
67                      value={item.used}
68// … truncated