AI Badge

1"use client";
2 
3import Atropos from "atropos/react";
4import "atropos/css";
5 
6import { forwardRef } from "react";
7 
8import { cn } from "@/lib/utils";
9 
10import {
11  type BadgeBackground,
12  type BadgeBranding,
13  type BadgeColors,
14  type BadgePatternType,
15  BadgePreview,
16} from "./badge-preview";
17 
18export type { BadgeColors, BadgeBranding, BadgeBackground, BadgePatternType };
19 
20export interface AIBadgeProps {
21  /** URL of the profile picture (can be AI-generated) */
22  profilePictureUrl?: string | null;
23  /** Badge/member number (e.g., "#001") */
24  badgeNumber: string;
25  /** First name */
26  firstName: string;
27  /** Last name */
28  lastName?: string;
29  /** Role or title displayed on badge */
30  jobTitle: string;
31  /** Custom URL for QR code (defaults to current origin + /p/{number}) */
32  qrCodeUrl?: string;
33  /** Custom color palette */
34  colors?: Partial<BadgeColors>;
35  /** Custom branding (title, subtitle, logo) */
36  branding?: BadgeBranding;
37  /** Custom background (pattern, image, gradient) */
38  background?: BadgeBackground;
39  /** Additional CSS classes */
40  className?: string;
41}
42 
43export const AIBadge = forwardRef<SVGSVGElement, AIBadgeProps>(function AIBadge(
44  {
45    profilePictureUrl,
46    badgeNumber,
47    firstName,
48    lastName,
49    jobTitle,
50    qrCodeUrl,
51    colors,
52    branding,
53    background,
54    className,
55  },
56  ref,
57) {
58  return (
59    <div data-slot="ai-badge" className={cn("w-full", className)}>
60      <Atropos
61        className="atropos-badge w-full"
62        activeOffset={40}
63        shadowScale={1.05}
64        rotateXMax={15}
65        rotateYMax={15}
66        shadow={true}
67        highlight={true}
68      >
69        {/* Outer glass frame - furthest back */}
70        <div
71          data-atropos-offset="-3"
72          className="absolute inset-0 rounded-2xl"
73          style={{
74            background:
75              "linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%)",
76            boxShadow:
77              "0 25px 80px rgba(0, 0, 0, 0.4), inset 1px 1px 2px rgba(255,255,255,0.1)",
78            border: "1px solid rgba(255,255,255,0.15)",
79          }}
80        />
81 
82        {/* Badge content - middle layer */}
83        <div
84          data-atropos-offset="0"
85          className="relative rounded-xl overflow-hidden"
86          style={{
87            boxShadow: "0 10px 40px rgba(0, 0, 0, 0.3)",
88          }}
89        >
90          <BadgePreview
91            ref={ref}
92            profilePictureUrl={profilePictureUrl}
93            badgeNumber={badgeNumber}
94// … truncated