init with react+axum+spacetimedb

src/components/auth/CaptchaChallengeField.tsx

@@ -0,0 +1,34 @@
+import type { AuthCaptchaChallenge } from '../../services/authService';
+
+type CaptchaChallengeFieldProps = {
+  challenge: AuthCaptchaChallenge | null;
+  answer: string;
+  onAnswerChange: (value: string) => void;
+};
+
+export function CaptchaChallengeField({
+  challenge,
+  answer,
+  onAnswerChange,
+}: CaptchaChallengeFieldProps) {
+  if (!challenge) {
+    return null;
+  }
+
+  return (
+    <div className="platform-banner platform-banner--info grid gap-3">
+      <div className="text-sm leading-6">{challenge.promptText}</div>
+      <img
+        src={challenge.imageDataUrl}
+        alt="图形验证码"
+        className="platform-subpanel h-14 w-40 rounded-2xl object-cover"
+      />
+      <input
+        className="platform-input h-11"
+        value={answer}
+        placeholder="输入图形验证码"
+        onChange={(event) => onAnswerChange(event.target.value)}
+      />
+    </div>
+  );
+}