"use client" import type React from "react" import { Award, Star } from "lucide-react" import { cn } from "@/lib/utils" export interface AwardsComponentProps { variant?: "stamp" | "award" | "certificate" | "badge" | "sticker" | "id-card" title: string subtitle?: string description?: string date?: string recipient?: string level?: "bronze" | "silver" | "gold" | "platinum" className?: string showIcon?: boolean customIcon?: React.ReactNode } const levelColors = { bronze: "from-amber-600 to-amber-800", silver: "from-gray-400 to-gray-600", gold: "from-yellow-400 to-yellow-600", platinum: "from-slate-300 to-slate-500", } export function Awards({ variant = "badge", title, subtitle, description, date, recipient, level = "gold", className, showIcon = true, }: AwardsComponentProps) { // Stamp Variant if (variant === "stamp") { const createSerratedPath = () => { const radius = 96 // Half of 192px (w-48) const teeth = 40 const innerRadius = radius - 8 const outerRadius = radius let path = "" for (let i = 0; i < teeth; i++) { const angle = (i / teeth) * 2 * Math.PI const r = i % 2 === 0 ? outerRadius : innerRadius const x = Math.cos(angle) * r + radius const y = Math.sin(angle) * r + radius if (i === 0) { path += `M ${x} ${y}` } else { path += ` L ${x} ${y}` } } path += " Z" return path } // Create curved text path // eslint-disable-next-line @typescript-eslint/no-unused-vars const createTextPath = (radius: number, id: string) => { const centerX = 96 const centerY = 96 return `M ${centerX - radius} ${centerY} A ${radius} ${radius} 0 0 1 ${centerX + radius} ${centerY}` } return (

{showIcon && (

{}

)} {recipient && (

{recipient}

)} {date &&

{date}

}

) } // Award Variant if (variant === "award") { const LaurelWreath = () => ( ) return (

{level.toUpperCase()}

{/* Main Title */}

{title}

{/* Decorative Line */}

{/* Subtitle */}

{subtitle}

{/* Recipient */} {recipient && (

{recipient}

)} {/* Date */}

{date}

) } if (variant === "certificate") { const Badge = () => ( ) return (

Certificate {" "} of {title}

This is to certify that

{recipient}

{subtitle}

Awarded on: {date}

) } if (variant === "badge") { const Badge = () => ( ) return (

{title}

{subtitle}

{recipient &&

by {recipient}

}•

{date}

) } // Sticker Variant if (variant === "sticker") { return (

{title} {title} {title} {title} {title} {title} {title} {title} {title} {title} {title} {title} {title} {title} {title}

) } if (variant === "id-card") { return (

{date}

{title}

{subtitle}

VIRTUAL

{description}

) } // Default fallback return null }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Award

Created by

Installation

How to use

Dependencies