tryFullStack/web/src/app/shadcn/badge/page.tsx

'use client';

import { Badge } from '@/components/ui/badge';
import { BadgeCheckIcon } from 'lucide-react';

export default function BadgePage() {
  return (
    <div className="flex h-full w-full flex-1 flex-col items-center justify-center space-y-10">
      <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>
    </div>
  );
}