@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/waka-badge-showcase/index.tsx

@@ -0,0 +1,704 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type BadgeRarity = "common" | "rare" | "epic" | "legendary"
+
+export interface Badge {
+  /** Unique identifier */
+  id: string
+  /** Badge name */
+  name: string
+  /** Badge description */
+  description: string
+  /** Badge icon (React node) */
+  icon: React.ReactNode
+  /** Rarity tier */
+  rarity: BadgeRarity
+  /** Whether the badge is unlocked */
+  unlocked: boolean
+  /** When the badge was unlocked */
+  unlockedAt?: Date
+  /** Progress towards unlocking (0-100) */
+  progress?: number
+  /** Badge category */
+  category?: string
+  /** Whether this is a newly unlocked badge */
+  isNew?: boolean
+}
+
+export interface WakaBadgeShowcaseProps {
+  /** Array of badges to display */
+  badges: Badge[]
+  /** Callback when a badge is clicked */
+  onBadgeClick?: (id: string) => void
+  /** Display variant */
+  variant?: "grid" | "list" | "showcase"
+  /** Whether to show locked badges */
+  showLocked?: boolean
+  /** Whether to show progress indicators */
+  showProgress?: boolean
+  /** Number of columns for grid layout */
+  columns?: number
+  /** Size of badge icons */
+  size?: "sm" | "md" | "lg"
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Rarity Configuration
+// ============================================================================
+
+const rarityConfig = {
+  common: {
+    gradient: "from-slate-400 to-slate-500",
+    glow: "#94a3b8",
+    border: "border-slate-400",
+    bg: "bg-slate-100 dark:bg-slate-800",
+    text: "text-slate-600 dark:text-slate-300",
+    shine: "rgba(148, 163, 184, 0.6)",
+    label: "Common",
+  },
+  rare: {
+    gradient: "from-blue-400 to-blue-600",
+    glow: "#3b82f6",
+    border: "border-blue-400",
+    bg: "bg-blue-100 dark:bg-blue-900",
+    text: "text-blue-600 dark:text-blue-300",
+    shine: "rgba(59, 130, 246, 0.6)",
+    label: "Rare",
+  },
+  epic: {
+    gradient: "from-purple-400 to-purple-600",
+    glow: "#a855f7",
+    border: "border-purple-400",
+    bg: "bg-purple-100 dark:bg-purple-900",
+    text: "text-purple-600 dark:text-purple-300",
+    shine: "rgba(168, 85, 247, 0.6)",
+    label: "Epic",
+  },
+  legendary: {
+    gradient: "from-amber-400 via-orange-500 to-red-500",
+    glow: "#f59e0b",
+    border: "border-amber-400",
+    bg: "bg-amber-100 dark:bg-amber-900",
+    text: "text-amber-600 dark:text-amber-300",
+    shine: "rgba(245, 158, 11, 0.8)",
+    label: "Legendary",
+  },
+}
+
+// ============================================================================
+// Size Configuration
+// ============================================================================
+
+const sizeConfig = {
+  sm: {
+    badge: "h-12 w-12",
+    icon: "h-6 w-6",
+    text: "text-xs",
+    gap: "gap-2",
+  },
+  md: {
+    badge: "h-16 w-16",
+    icon: "h-8 w-8",
+    text: "text-sm",
+    gap: "gap-3",
+  },
+  lg: {
+    badge: "h-24 w-24",
+    icon: "h-12 w-12",
+    text: "text-base",
+    gap: "gap-4",
+  },
+}
+
+// ============================================================================
+// Shine Effect Component
+// ============================================================================
+
+function ShineEffect({ active, color }: { active: boolean; color: string }) {
+  if (!active) return null
+
+  return (
+    <>
+      <div className="absolute inset-0 overflow-hidden rounded-full">
+        <div
+          className="absolute inset-0 animate-badge-shine"
+          style={{
+            background: `linear-gradient(
+              90deg,
+              transparent 0%,
+              ${color} 50%,
+              transparent 100%
+            )`,
+          }}
+        />
+      </div>
+      <style>{`
+        @keyframes badge-shine {
+          0% {
+            transform: translateX(-100%) rotate(45deg);
+          }
+          100% {
+            transform: translateX(200%) rotate(45deg);
+          }
+        }
+        .animate-badge-shine {
+          animation: badge-shine 3s ease-in-out infinite;
+        }
+      `}</style>
+    </>
+  )
+}
+
+// ============================================================================
+// Glow Effect Component
+// ============================================================================
+
+function GlowEffect({ active, color }: { active: boolean; color: string }) {
+  if (!active) return null
+
+  return (
+    <>
+      <div
+        className="absolute inset-0 rounded-full animate-badge-glow"
+        style={{
+          boxShadow: `0 0 20px 4px ${color}60, 0 0 40px 8px ${color}30`,
+        }}
+      />
+      <style>{`
+        @keyframes badge-glow {
+          0%, 100% { opacity: 0.6; }
+          50% { opacity: 1; }
+        }
+        .animate-badge-glow {
+          animation: badge-glow 2s ease-in-out infinite;
+        }
+      `}</style>
+    </>
+  )
+}
+
+// ============================================================================
+// New Badge Highlight Component
+// ============================================================================
+
+function NewBadgeIndicator() {
+  return (
+    <>
+      <div className="absolute -top-1 -right-1 z-20">
+        <span className="relative flex h-4 w-4">
+          <span className="animate-badge-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+          <span className="relative inline-flex rounded-full h-4 w-4 bg-green-500 items-center justify-center">
+            <span className="text-[8px] font-bold text-white">!</span>
+          </span>
+        </span>
+      </div>
+      <style>{`
+        @keyframes badge-ping {
+          75%, 100% {
+            transform: scale(2);
+            opacity: 0;
+          }
+        }
+        .animate-badge-ping {
+          animation: badge-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+        }
+      `}</style>
+    </>
+  )
+}
+
+// ============================================================================
+// Progress Ring Component
+// ============================================================================
+
+function ProgressRing({
+  progress,
+  color,
+  size,
+}: {
+  progress: number
+  color: string
+  size: "sm" | "md" | "lg"
+}) {
+  const strokeWidth = size === "sm" ? 3 : size === "md" ? 4 : 5
+  const radius = 46
+
+  return (
+    <svg className="absolute inset-0 -rotate-90" viewBox="0 0 100 100">
+      <circle
+        cx="50"
+        cy="50"
+        r={radius}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        className="text-muted-foreground/20"
+      />
+      <circle
+        cx="50"
+        cy="50"
+        r={radius}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeDasharray={`${(progress / 100) * 2 * Math.PI * radius} ${2 * Math.PI * radius}`}
+        className="transition-all duration-500"
+      />
+    </svg>
+  )
+}
+
+// ============================================================================
+// Badge Item Component
+// ============================================================================
+
+interface BadgeItemProps {
+  badge: Badge
+  size: "sm" | "md" | "lg"
+  showProgress: boolean
+  onClick?: () => void
+  variant: "grid" | "list" | "showcase"
+}
+
+function BadgeItem({ badge, size, showProgress, onClick, variant }: BadgeItemProps) {
+  const [isHovered, setIsHovered] = React.useState(false)
+  const config = rarityConfig[badge.rarity]
+  const sizes = sizeConfig[size]
+
+  const isLocked = !badge.unlocked
+  const hasProgress = isLocked && showProgress && badge.progress !== undefined && badge.progress > 0
+
+  return (
+    <div
+      className={cn(
+        "group relative cursor-pointer transition-transform duration-200",
+        variant === "list" && "flex items-center gap-4",
+        variant === "showcase" && "flex flex-col items-center",
+        onClick && "cursor-pointer"
+      )}
+      onClick={onClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Badge Container */}
+      <div className="relative">
+        {/* Glow effect for unlocked badges */}
+        {!isLocked && <GlowEffect active={isHovered} color={config.glow} />}
+
+        {/* New badge indicator */}
+        {badge.isNew && !isLocked && <NewBadgeIndicator />}
+
+        {/* Main badge circle */}
+        <div
+          className={cn(
+            "relative flex items-center justify-center rounded-full border-2 transition-all duration-300",
+            sizes.badge,
+            isLocked
+              ? "bg-muted/50 border-muted-foreground/30 grayscale"
+              : cn("bg-gradient-to-br", config.gradient, config.border),
+            !isLocked && isHovered && "scale-110",
+            !isLocked && "shadow-lg"
+          )}
+          style={
+            !isLocked && isHovered
+              ? { boxShadow: `0 0 30px 8px ${config.glow}50` }
+              : {}
+          }
+        >
+          {/* Progress ring for locked badges */}
+          {hasProgress && (
+            <ProgressRing
+              progress={badge.progress!}
+              color={config.glow}
+              size={size}
+            />
+          )}
+
+          {/* Icon or silhouette */}
+          <div
+            className={cn(
+              sizes.icon,
+              "transition-all duration-200 flex items-center justify-center",
+              isLocked
+                ? "text-muted-foreground/40 opacity-50 blur-[1px]"
+                : "text-white"
+            )}
+          >
+            {badge.icon}
+          </div>
+
+          {/* Lock overlay for locked badges */}
+          {isLocked && (
+            <div className="absolute inset-0 flex items-center justify-center rounded-full bg-black/20">
+              <svg
+                className="h-5 w-5 text-muted-foreground/60"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                />
+              </svg>
+            </div>
+          )}
+
+          {/* Shine effect for unlocked badges */}
+          {!isLocked && <ShineEffect active={true} color={config.shine} />}
+        </div>
+      </div>
+
+      {/* Badge info for list/showcase variants */}
+      {(variant === "list" || variant === "showcase") && (
+        <div
+          className={cn(
+            "transition-opacity duration-200",
+            variant === "showcase" && "text-center mt-2",
+            isLocked && "opacity-60"
+          )}
+        >
+          <div className={cn("font-semibold", sizes.text)}>{badge.name}</div>
+          {variant === "list" && (
+            <div className={cn("text-muted-foreground", sizes.text, "text-xs")}>
+              {badge.description}
+            </div>
+          )}
+          <div
+            className={cn(
+              "inline-flex items-center rounded-full px-2 py-0.5 mt-1",
+              sizes.text,
+              "text-[10px] font-medium uppercase tracking-wider",
+              config.bg,
+              config.text
+            )}
+          >
+            {config.label}
+          </div>
+          {hasProgress && (
+            <div className={cn("text-muted-foreground mt-1", "text-xs")}>
+              {Math.round(badge.progress!)}% complete
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Hover tooltip for grid variant */}
+      {variant === "grid" && isHovered && (
+        <div
+          className={cn(
+            "absolute left-1/2 top-full z-30 mt-2 -translate-x-1/2",
+            "whitespace-nowrap rounded-lg bg-popover px-3 py-2 text-sm shadow-lg border",
+            "animate-badge-tooltip"
+          )}
+        >
+          <div className="font-semibold">{badge.name}</div>
+          <div className="text-xs text-muted-foreground max-w-[200px] whitespace-normal">
+            {badge.description}
+          </div>
+          <div
+            className={cn(
+              "inline-flex items-center rounded-full px-2 py-0.5 mt-1",
+              "text-[10px] font-medium uppercase tracking-wider",
+              config.bg,
+              config.text
+            )}
+          >
+            {config.label}
+          </div>
+          {badge.unlockedAt && !isLocked && (
+            <div className="text-xs text-muted-foreground mt-1">
+              Unlocked: {badge.unlockedAt.toLocaleDateString()}
+            </div>
+          )}
+          {hasProgress && (
+            <div className="text-xs text-muted-foreground mt-1">
+              Progress: {Math.round(badge.progress!)}%
+            </div>
+          )}
+          <style>{`
+            @keyframes badge-tooltip {
+              from { opacity: 0; transform: translate(-50%, 10px); }
+              to { opacity: 1; transform: translate(-50%, 0); }
+            }
+            .animate-badge-tooltip {
+              animation: badge-tooltip 0.2s ease-out;
+            }
+          `}</style>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Category Header Component
+// ============================================================================
+
+function CategoryHeader({
+  category,
+  count,
+  unlockedCount,
+}: {
+  category: string
+  count: number
+  unlockedCount: number
+}) {
+  return (
+    <div className="flex items-center justify-between mb-4">
+      <h3 className="text-lg font-semibold capitalize">{category}</h3>
+      <span className="text-sm text-muted-foreground">
+        {unlockedCount}/{count}
+      </span>
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaBadgeShowcase({
+  badges,
+  onBadgeClick,
+  variant = "grid",
+  showLocked = true,
+  showProgress = true,
+  columns = 4,
+  size = "md",
+  className,
+}: WakaBadgeShowcaseProps) {
+  // Filter badges based on showLocked
+  const displayBadges = showLocked ? badges : badges.filter((b) => b.unlocked)
+
+  // Group badges by category if categories exist
+  const categories = React.useMemo(() => {
+    const grouped: Record<string, Badge[]> = {}
+    displayBadges.forEach((badge) => {
+      const cat = badge.category || "uncategorized"
+      if (!grouped[cat]) grouped[cat] = []
+      grouped[cat].push(badge)
+    })
+    return grouped
+  }, [displayBadges])
+
+  const hasCategories = Object.keys(categories).length > 1 || !categories["uncategorized"]
+
+  // Grid column classes
+  const getGridCols = () => {
+    switch (columns) {
+      case 1:
+        return "grid-cols-1"
+      case 2:
+        return "grid-cols-2"
+      case 3:
+        return "grid-cols-3"
+      case 4:
+        return "grid-cols-4"
+      case 5:
+        return "grid-cols-5"
+      case 6:
+        return "grid-cols-6"
+      default:
+        return "grid-cols-4"
+    }
+  }
+
+  // Render badges without categories
+  const renderBadges = (badgesToRender: Badge[]) => {
+    if (variant === "list") {
+      return (
+        <div className="flex flex-col gap-4">
+          {badgesToRender.map((badge) => (
+            <BadgeItem
+              key={badge.id}
+              badge={badge}
+              size={size}
+              showProgress={showProgress}
+              onClick={onBadgeClick ? () => onBadgeClick(badge.id) : undefined}
+              variant={variant}
+            />
+          ))}
+        </div>
+      )
+    }
+
+    if (variant === "showcase") {
+      return (
+        <div className="flex flex-wrap justify-center gap-8">
+          {badgesToRender.map((badge) => (
+            <BadgeItem
+              key={badge.id}
+              badge={badge}
+              size={size}
+              showProgress={showProgress}
+              onClick={onBadgeClick ? () => onBadgeClick(badge.id) : undefined}
+              variant={variant}
+            />
+          ))}
+        </div>
+      )
+    }
+
+    // Grid variant (default)
+    return (
+      <div className={cn("grid gap-6", getGridCols())}>
+        {badgesToRender.map((badge) => (
+          <div key={badge.id} className="flex justify-center">
+            <BadgeItem
+              badge={badge}
+              size={size}
+              showProgress={showProgress}
+              onClick={onBadgeClick ? () => onBadgeClick(badge.id) : undefined}
+              variant={variant}
+            />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("relative", className)}>
+      {hasCategories ? (
+        <div className="space-y-8">
+          {Object.entries(categories).map(([category, categoryBadges]) => (
+            <div key={category}>
+              <CategoryHeader
+                category={category}
+                count={categoryBadges.length}
+                unlockedCount={categoryBadges.filter((b) => b.unlocked).length}
+              />
+              {renderBadges(categoryBadges)}
+            </div>
+          ))}
+        </div>
+      ) : (
+        renderBadges(displayBadges)
+      )}
+
+      {/* Global animations */}
+      <style>{`
+        @keyframes legendary-shimmer {
+          0% { background-position: 0% 50%; }
+          50% { background-position: 100% 50%; }
+          100% { background-position: 0% 50%; }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+// ============================================================================
+// Preset Showcase Variants
+// ============================================================================
+
+export function WakaBadgeShowcaseCompact(
+  props: Omit<WakaBadgeShowcaseProps, "variant" | "size" | "columns">
+) {
+  return <WakaBadgeShowcase variant="grid" size="sm" columns={6} {...props} />
+}
+
+export function WakaBadgeShowcaseList(
+  props: Omit<WakaBadgeShowcaseProps, "variant">
+) {
+  return <WakaBadgeShowcase variant="list" {...props} />
+}
+
+export function WakaBadgeShowcaseHero(
+  props: Omit<WakaBadgeShowcaseProps, "variant" | "size">
+) {
+  return <WakaBadgeShowcase variant="showcase" size="lg" {...props} />
+}
+
+// ============================================================================
+// Badge Stats Component
+// ============================================================================
+
+export interface WakaBadgeStatsProps {
+  badges: Badge[]
+  className?: string
+}
+
+export function WakaBadgeStats({ badges, className }: WakaBadgeStatsProps) {
+  const stats = React.useMemo(() => {
+    const total = badges.length
+    const unlocked = badges.filter((b) => b.unlocked).length
+    const byRarity = {
+      common: badges.filter((b) => b.rarity === "common"),
+      rare: badges.filter((b) => b.rarity === "rare"),
+      epic: badges.filter((b) => b.rarity === "epic"),
+      legendary: badges.filter((b) => b.rarity === "legendary"),
+    }
+
+    return {
+      total,
+      unlocked,
+      percentage: Math.round((unlocked / total) * 100),
+      byRarity,
+    }
+  }, [badges])
+
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap gap-4 p-4 rounded-lg bg-muted/50 border",
+        className
+      )}
+    >
+      <div className="flex-1 min-w-[100px]">
+        <div className="text-2xl font-bold">
+          {stats.unlocked}/{stats.total}
+        </div>
+        <div className="text-sm text-muted-foreground">Badges Unlocked</div>
+        <div className="mt-2 h-2 rounded-full bg-muted overflow-hidden">
+          <div
+            className="h-full bg-primary rounded-full transition-all duration-500"
+            style={{ width: `${stats.percentage}%` }}
+          />
+        </div>
+      </div>
+
+      {(["common", "rare", "epic", "legendary"] as const).map((rarity) => {
+        const rarityBadges = stats.byRarity[rarity]
+        const unlockedCount = rarityBadges.filter((b) => b.unlocked).length
+        const config = rarityConfig[rarity]
+
+        return (
+          <div key={rarity} className="flex items-center gap-2">
+            <div
+              className={cn(
+                "h-8 w-8 rounded-full bg-gradient-to-br flex items-center justify-center",
+                config.gradient
+              )}
+            >
+              <span className="text-white text-xs font-bold">
+                {unlockedCount}
+              </span>
+            </div>
+            <div>
+              <div className={cn("text-xs font-medium", config.text)}>
+                {config.label}
+              </div>
+              <div className="text-xs text-muted-foreground">
+                of {rarityBadges.length}
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}