Verification Badge

1'use client';
2 
3import React from 'react';
4import { Badge } from '@/components/ui/badge';
5import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
6import { CheckCircle, Shield, Star, Crown } from 'lucide-react';
7import { cn } from '@/lib/utils/deso';
8 
9type BadgeStyle = 'default' | 'premium' | 'creator' | 'admin';
10type BadgeSize = 'sm' | 'md' | 'lg';
11 
12interface VerificationBadgeProps {
13  isVerified: boolean;
14  style?: BadgeStyle;
15  size?: BadgeSize;
16  showTooltip?: boolean;
17  tooltipText?: string;
18  animated?: boolean;
19  className?: string;
20}
21 
22const badgeConfig = {
23  default: {
24    icon: CheckCircle,
25    colors: 'bg-blue-500 hover:bg-blue-600 text-white',
26    tooltip: 'Verified account',
27  },
28  premium: {
29    icon: Star,
30    colors: 'bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 text-white',
31    tooltip: 'Premium verified account',
32  },
33  creator: {
34    icon: Crown,
35    colors: 'bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white',
36    tooltip: 'Verified creator',
37  },
38  admin: {
39    icon: Shield,
40    colors: 'bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white',
41    tooltip: 'Platform administrator',
42  },
43} as const;
44 
45const sizeConfig = {
46  sm: { badge: 'h-2 w-2', icon: 'h-2 w-2' },
47  md: { badge: 'h-3 w-3', icon: 'h-3 w-3' },
48  lg: { badge: 'h-4 w-4', icon: 'h-4 w-4' },
49} as const;
50 
51export function VerificationBadge({
52  isVerified,
53  style = 'default',
54  size = 'md',
55  showTooltip = true,
56  tooltipText,
57  animated = true,
58  className,
59}: VerificationBadgeProps) {
60  // Don't render if not verified
61  if (!isVerified) {
62    return null;
63  }
64 
65  const config = badgeConfig[style];
66  const sizeClasses = sizeConfig[size];
67  const Icon = config.icon;
68  const tooltip = tooltipText || config.tooltip;
69 
70  const badgeElement = (
71    <Badge
72      variant="secondary"
73      className={cn(
74        'p-0 rounded-full transition-all duration-200',
75        config.colors,
76        sizeClasses.badge,
77        animated && 'animate-in fade-in-0 zoom-in-95 duration-300',
78        className
79      )}
80    >
81      <Icon className={cn('text-current', sizeClasses.icon)} />
82    </Badge>
83  );
84 
85  if (!showTooltip) {
86    return badgeElement;
87  }
88 
89  return (
90    <TooltipProvider>
91      <Tooltip>
92        <TooltipTrigger asChild>
93          {badgeElement}
94        </TooltipTrigger>
95        <TooltipContent>
96          <p>{tooltip}</p>
97// … truncated