You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
1.0 KiB
32 lines
1.0 KiB
3 weeks ago
|
'use client';
|
||
|
|
|
||
|
|
import { Badge } from '@/components/ui/badge';
|
||
|
|
import { BadgeCheckIcon } from 'lucide-react';
|
||
|
|
|
||
|
|
export default function BadgePage() {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="flex items-center justify-center space-x-3">
|
||
|
|
<div className="flex flex-col items-center gap-2 rounded p-3 shadow-lg">
|
||
|
|
<Badge>Badge</Badge>
|
||
|
|
<Badge variant="secondary">Secondary</Badge>
|
||
|
|
<Badge variant="outline">Outline</Badge>
|
||
|
|
<Badge variant="destructive">Destructive</Badge>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col items-center gap-2 rounded p-3 shadow-lg">
|
||
|
|
<Badge>
|
||
|
|
<BadgeCheckIcon />
|
||
|
|
Varified
|
||
|
|
</Badge>
|
||
|
|
<Badge variant="destructive" className="h-5 min-w-5 rounded-full font-mono tabular-nums">
|
||
|
|
99
|
||
|
|
</Badge>
|
||
|
|
<Badge variant="outline" className="h-5 min-w-5 rounded-full font-mono tabular-nums">
|
||
|
|
100+
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|