Initial commit

src/components/krow/talent/VerifiedStamp.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+// Scallop radius for the flower-like outer border
+const SCALLOP_R = (R, n) => R * Math.sin(Math.PI / n);
+
+function scallopPath(cx, cy, R, n) {
+  const r = SCALLOP_R(R, n);
+  const pts = [];
+  for (let i = 0; i < n; i++) {
+    const a = (i / n) * 2 * Math.PI - Math.PI / 2;
+    pts.push([cx + R * Math.cos(a), cy + R * Math.sin(a)]);
+  }
+  let d = `M ${pts[0][0].toFixed(2)} ${pts[0][1].toFixed(2)} `;
+  for (let i = 0; i < n; i++) {
+    const p2 = pts[(i + 1) % n];
+    d += `A ${r.toFixed(2)} ${r.toFixed(2)} 0 0 0 ${p2[0].toFixed(2)} ${p2[1].toFixed(2)} `;
+  }
+  return d + 'Z';
+}
+
+function starPath(cx, cy, outer, inner, points = 5) {
+  let d = '';
+  for (let i = 0; i < points * 2; i++) {
+    const r = i % 2 === 0 ? outer : inner;
+    const a = (i / (points * 2)) * 2 * Math.PI - Math.PI / 2;
+    const x = cx + r * Math.cos(a);
+    const y = cy + r * Math.sin(a);
+    d += `${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)} `;
+  }
+  return d + 'Z';
+}
+
+export default function VerifiedStamp({ size = 26, className = '' }) {
+  const cx = 50, cy = 50, R = 44, n = 12;
+  const green = '#9FD34E';
+  const textPath = `M ${cx} ${cy - 36} A 36 36 0 1 1 ${cx - 0.01} ${cy - 36}`;
+  const label = 'VERIFIED \u2022 VERIFIED \u2022 VERIFIED \u2022';
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 100 100"
+      className={className}
+      role="img"
+      aria-label="Verified identity"
+    >
+      <path d={scallopPath(cx, cy, R, n)} fill={green} />
+      <circle cx={cx} cy={cy} r={36} fill="#FFFFFF" />
+      <circle cx={cx} cy={cy} r={36} fill="none" stroke={green} strokeWidth="1.5" />
+      <path id="verified-stamp-arc" d={textPath} fill="none" />
+      <text fontSize="6.5" fontWeight="700" fill={green} letterSpacing="0.5" fontFamily="Sora, sans-serif">
+        <textPath href="#verified-stamp-arc" startOffset="0%">{label}</textPath>
+      </text>
+      <path d={starPath(cx, cy + 1, 13, 5.5)} fill={green} />
+    </svg>
+  );
+}