https://www.generative-income.ai/assets/ArchetypeBadge-CGoYTGd9.js

1const e=`type Archetype = 'architect' | 'initiator' | 'strategist' | 'builder' | 'synthesizer';
2
3interface ArchetypeBadgeProps {
4  archetype: Archetype;
5  size: 'sm' | 'md' | 'lg';
6  showLabel?: boolean;
7}
8
9const SIZES = { sm: 24, md: 40, lg: 80 } as const;
10
11const LABELS: Record<Archetype, string> = {
12  architect: 'The Architect',
13  initiator: 'The Initiator',
14  strategist: 'The Strategist',
15  builder: 'The Builder',
16  synthesizer: 'The Synthesizer',
17};
18
19const gold = '#D4A843';
20const teal = '#01696F';
21
22function ArchitectSVG() {
23  return (
24    <g>
25      <rect x="15" y="15" width="22" height="22" rx="2" fill="none" stroke={gold} strokeWidth="2.5" />
26      <rect x="43" y="15" width="22" height="22" rx="2" fill="none" stroke={gold} strokeWidth="2.5" />
27      <rect x="15" y="43" width="22" height="22" rx="2" fill="none" stroke={gold} strokeWidth="2.5" />
28      <rect x="43" y="43" width="22" height="22" rx="2" fill="none" stroke={teal} strokeWidth="2.5" />
29    </g>
30  );
31}
32
33function InitiatorSVG() {
34  return (
35    <g>
36      <circle cx="36" cy="40" r="18" fill="none" stroke={teal} strokeWidth="2.5" />
37      <path d="M32 40 L50 40 L44 34 M50 40 L44 46" fill="none" stroke={gold} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
38    </g>
39  );
40}
41
42function StrategistSVG() {
43  return (
44    <g>
45      <line x1="40" y1="18" x2="20" y2="58" stroke={teal} strokeWidth="2.5" />
46      <line x1="40" y1="18" x2="60" y2="58" stroke={teal} strokeWidth="2.5" />
47      <line x1="20" y1="58" x2="60" y2="58" stroke={teal} strokeWidth="2.5" />
48      <circle cx="40" cy="18" r="5" fill={gold} />
49      <circle cx="20" cy="58" r="5" fill={gold} />
50      <circle cx="60" cy="58" r="5" fill={gold} />
51    </g>
52  );
53}
54
55function BuilderSVG() {
56  return (
57    <g>
58      <rect x="14" y="48" width="52" height="10" rx="2" fill="none" stroke={gold} strokeWidth="2.5" />
59      <rect x="18" y="32" width="44" height="10" rx="2" fill="none" stroke={gold} strokeWidth="2.5" />
60      <rect x="22" y="16" width="36" height="10" rx="2" fill="none" stroke={teal} strokeWidth="2.5" />
61    </g>
62  );
63}
64
65function SynthesizerSVG() {
66  return (
67    <g>
68      <circle cx="30" cy="32" r="16" fill="none" stroke={gold} strokeWidth="2.5" />
69      <circle cx="50" cy="32" r="16" fill="none" stroke={gold} strokeWidth="2.5" />
70      <circle cx="40" cy="48" r="16" fill="none" stroke={gold} strokeWidth="2.5" />
71      <path d="M40 28 Q40 40 36 48 Q40 44 44 48 Q40 40 40 28Z" fill={teal} opacity="0.8" />
72    </g>
73  );
74}
75
76const SVG_MAP: Record<Archetype, () => JSX.Element> = {
77  architect: ArchitectSVG,
78  initiator: InitiatorSVG,
79  strategist: StrategistSVG,
80  builder: BuilderSVG,
81  synthesizer: SynthesizerSVG,
82};
83
84export function ArchetypeBadge({ archetype, size, showLabel = false }: ArchetypeBadgeProps) {
85  const px = SIZES[size];
86  const SvgContent = SVG_MAP[archetype];
87
88  return (
89    <div className="inline-flex flex-col items-center gap-1">
90      <svg

91        viewBox="0 0 80 80"
92        width={px}
93        height={px}
94        className="shrink-0"
95        aria-label={LABELS[archetype]}
96      >
97        <rect width="80" height="80" rx="12" fill="#0B1420" />
98        <SvgContent />
99      </svg>
100      {showLabel && (
101        <span className="font-satoshi text-xs font-semibold text-accent whitespace-nowrap">
102          {LABELS[archetype]}
103        </span>
104      )}
105    </div>
106  );
107}
108
109export { LABELS as ARCHETYPE_LABELS };
110export type { Archetype };
111`;export{e as default};