{`${firstName} ${lastName} - ${branding.title} Badge`}

4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:Te18,"use client"; import Atropos from "atropos/react"; import "atropos/css"; import { forwardRef } from "react"; import { cn } from "@/lib/utils"; import { type BadgeBackground, type BadgeBranding, type BadgeColors, type BadgePatternType, BadgePreview, } from "./badge-preview"; export type { BadgeColors, BadgeBranding, BadgeBackground, BadgePatternType }; export interface AIBadgeProps { /** URL of the profile picture (can be AI-generated) */ profilePictureUrl?: string | null; /** Badge/member number (e.g., "#001") */ badgeNumber: string; /** First name */ firstName: string; /** Last name */ lastName?: string; /** Role or title displayed on badge */ jobTitle: string; /** Custom URL for QR code (defaults to current origin + /p/{number}) */ qrCodeUrl?: string; /** Custom color palette */ colors?: Partial; /** Custom branding (title, subtitle, logo) */ branding?: BadgeBranding; /** Custom background (pattern, image, gradient) */ background?: BadgeBackground; /** Additional CSS classes */ className?: string; } export const AIBadge = forwardRef(function AIBadge( { profilePictureUrl, badgeNumber, firstName, lastName, jobTitle, qrCodeUrl, colors, branding, background, className, }, ref, ) { return (

{/* Outer glass frame - furthest back */}

{/* Badge content - middle layer */}

); }); 51:T48f5,"use client"; import { forwardRef, useEffect, useState } from "react"; import QRCode from "qrcode"; import { cn } from "@/lib/utils"; export interface BadgeColors { background: string; foreground: string; primary: string; muted: string; mutedForeground: string; } export interface BadgeBranding { title: string; subtitle: string; logo?: React.ReactNode; organizationName?: string; organizationSubtitle?: string; } export type BadgePatternType = | "none" | "radial" | "grid" | "dots" | "waves" | "hexagons" | "circuits"; export interface BadgeBackground { /** Background pattern type */ pattern?: BadgePatternType; /** Pattern opacity (0-1) */ patternOpacity?: number; /** Pattern color (defaults to foreground) */ patternColor?: string; /** Custom background image URL */ imageUrl?: string; /** Background image opacity (0-1) */ imageOpacity?: number; /** Gradient stops (e.g., ["#ff0000", "#0000ff"]) */ gradient?: string[]; /** Gradient direction in degrees (default: 135) */ gradientAngle?: number; } export interface BadgePreviewProps { profilePictureUrl?: string | null; badgeNumber: string; firstName: string; lastName?: string; jobTitle: string; qrCodeUrl?: string; colors?: Partial; branding?: BadgeBranding; background?: BadgeBackground; className?: string; } const DEFAULT_COLORS: BadgeColors = { background: "#FAFAFA", foreground: "#0A0A0A", primary: "#00FF7F", muted: "#666666", mutedForeground: "#999999", }; const DEFAULT_BRANDING: BadgeBranding = { title: "100 DAYS", subtitle: "OF SHIPPING", }; const DEFAULT_BACKGROUND: BadgeBackground = { pattern: "radial", patternOpacity: 0.08, }; // Badge dimensions - square photo area const BADGE_WIDTH = 1080; const BADGE_HEIGHT = 1600; const PHOTO_SIZE = 960; // Pre-calculate radial line endpoints to avoid hydration mismatches const RADIAL_LINES = Array.from({ length: 24 }).map((_, i) => ({ key: `radial-${i}`, x2: Math.round(BADGE_WIDTH / 2 + Math.cos((i * 15 * Math.PI) / 180) * 1400), y2: Math.round(BADGE_HEIGHT / 2 + Math.sin((i * 15 * Math.PI) / 180) * 1400), })); // Pre-calculate octagon points const OCTAGON_POINTS = [200, 400, 600, 800, 1000, 1200].map((size, idx) => ({ key: `octagon-${idx}`, points: Array.from({ length: 8 }) .map((_, i) => { const angle = (i * 45 - 22.5) * (Math.PI / 180); const x = Math.round(BADGE_WIDTH / 2 + Math.cos(angle) * size); const y = Math.round(BADGE_HEIGHT / 2 + Math.sin(angle) * size); return `${x},${y}`; }) .join(" "), })); // Pre-calculate hexagon positions const HEXAGON_DATA = Array.from({ length: 12 }).flatMap((_, row) => Array.from({ length: 10 }).map((_, col) => { const size = 60; const xOffset = row % 2 === 0 ? 0 : size * 0.866; const x = Math.round(col * size * 1.732 + xOffset); const y = Math.round(row * size * 1.5); const points = Array.from({ length: 6 }) .map((_, i) => { const angle = (i * 60 - 30) * (Math.PI / 180); return `${Math.round(x + Math.cos(angle) * size)},${Math.round(y + Math.sin(angle) * size)}`; }) .join(" "); return { key: `hex-${row}-${col}`, points }; }), ); // Pre-calculate wave paths const WAVE_PATHS = Array.from({ length: 20 }).map((_, i) => ({ key: `wave-${i}`, d: `M 0 ${i * 80 + 40} Q ${BADGE_WIDTH / 4} ${i * 80} ${BADGE_WIDTH / 2} ${i * 80 + 40} T ${BADGE_WIDTH} ${i * 80 + 40}`, })); // Pre-calculate grid lines const GRID_VERTICAL = Array.from({ length: 22 }).map((_, i) => ({ key: `v-${i}`, x: i * 50, })); const GRID_HORIZONTAL = Array.from({ length: 33 }).map((_, i) => ({ key: `h-${i}`, y: i * 50, })); // Pre-calculate dots const DOTS_DATA = Array.from({ length: 22 }).flatMap((_, i) => Array.from({ length: 33 }).map((_, j) => ({ key: `dot-${i}-${j}`, cx: i * 50 + 25, cy: j * 50 + 25, })), ); // Pre-calculate circuit pattern const CIRCUIT_VERTICAL = Array.from({ length: 15 }).map((_, i) => ({ key: `circuit-v-${i}`, x: (i * 75) % BADGE_WIDTH, nodes: Array.from({ length: 8 }).map((_, j) => ({ key: `node-${i}-${j}`, cy: j * 200 + 100, })), })); const CIRCUIT_HORIZONTAL = Array.from({ length: 10 }).map((_, i) => ({ key: `h-circuit-${i}`, y: i * 160 + 80, })); // Pre-calculate gradient stops helper const getGradientStops = (colors: string[]) => colors.map((color, i) => ({ key: `stop-${i}`, offset: `${(i / (colors.length - 1)) * 100}%`, color, })); function BackgroundPattern({ type, color, opacity, }: { type: BadgePatternType; color: string; opacity: number; }) { if (type === "none") return null; return ( {type === "radial" && ( <> {/* Radial lines from center */} {RADIAL_LINES.map((line) => ( ))} {/* Concentric octagons */} {OCTAGON_POINTS.map((octagon) => ( ))} )} {type === "grid" && ( <> {/* Vertical lines */} {GRID_VERTICAL.map((line) => ( ))} {/* Horizontal lines */} {GRID_HORIZONTAL.map((line) => ( ))} )} {type === "dots" && DOTS_DATA.map((dot) => ( ))} {type === "waves" && WAVE_PATHS.map((wave) => ( ))} {type === "hexagons" && HEXAGON_DATA.map((hex) => ( ))} {type === "circuits" && ( <> {/* Circuit-like pattern */} {CIRCUIT_VERTICAL.map((circuit) => ( {circuit.nodes.map((node) => ( ))} ))} {CIRCUIT_HORIZONTAL.map((line) => ( ))} )} ); } export const BadgePreview = forwardRef( function BadgePreview( { profilePictureUrl, badgeNumber, firstName, lastName = "", jobTitle, qrCodeUrl, colors: customColors, branding: customBranding, background: customBackground, className, }, ref, ) { const [qrCodeDataUrl, setQrCodeDataUrl] = useState(""); const colors = { ...DEFAULT_COLORS, ...customColors }; const branding = { ...DEFAULT_BRANDING, ...customBranding }; const background = { ...DEFAULT_BACKGROUND, ...customBackground }; useEffect(() => { const generateQR = async () => { try { const numberOnly = badgeNumber.replace("#", ""); const url = qrCodeUrl || (typeof window !== "undefined" ? `${window.location.origin}/p/${numberOnly}` : ""); if (!url) return; const qrDataUrl = await QRCode.toDataURL(url, { width: 120, margin: 0, color: { dark: colors.foreground, light: colors.background, }, }); setQrCodeDataUrl(qrDataUrl); } catch (error) { console.error("Error generating QR code:", error); } }; generateQR(); }, [badgeNumber, qrCodeUrl, colors.foreground, colors.background]); const getNameFontSize = (name: string) => { if (name.length > 12) return "52"; if (name.length > 8) return "64"; return "72"; }; const gradientId = "badgeGradient"; const hasGradient = background.gradient && background.gradient.length >= 2; return (

); }, ); 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","atropos",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/atropos","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"atropos"}]]}]}],["$","li","qrcode",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/qrcode","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"qrcode"}]]}]}]]}],["$","$L4e",null,{"namespace":"@elements","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/default/blocks/badges/ai-badge/components/elements/ai-badge.tsx","content":"$50","type":"registry:component"},{"path":"registry/default/blocks/badges/ai-badge/components/elements/badge-preview.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]