Spaces:
Paused
Paused
File size: 2,485 Bytes
178e38e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import { useState, useCallback } from "preact/hooks";
import { useT } from "@shared/i18n/context";
import type { TranslationKey } from "@shared/i18n/translations";
interface AddAccountProps {
visible: boolean;
onSubmitRelay: (callbackUrl: string) => Promise<void>;
addInfo: string;
addError: string;
}
export function AddAccount({ visible, onSubmitRelay, addInfo, addError }: AddAccountProps) {
const t = useT();
const [input, setInput] = useState("");
const [submitting, setSubmitting] = useState(false);
const handleSubmit = useCallback(async () => {
setSubmitting(true);
await onSubmitRelay(input);
setSubmitting(false);
setInput("");
}, [input, onSubmitRelay]);
if (!visible && !addInfo && !addError) return null;
return (
<>
{addInfo && (
<p class="text-sm text-primary">{t(addInfo as TranslationKey)}</p>
)}
{addError && (
<p class="text-sm text-red-500">{t(addError as TranslationKey)}</p>
)}
{visible && (
<section class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-5 shadow-sm transition-colors">
<ol class="text-sm text-slate-500 dark:text-text-dim mb-4 space-y-1.5 list-decimal list-inside">
<li dangerouslySetInnerHTML={{ __html: t("addStep1") }} />
<li dangerouslySetInnerHTML={{ __html: t("addStep2") }} />
<li dangerouslySetInnerHTML={{ __html: t("addStep3") }} />
</ol>
<div class="flex gap-3">
<input
type="text"
value={input}
onInput={(e) => setInput((e.target as HTMLInputElement).value)}
placeholder={t("pasteCallback")}
class="flex-1 px-3 py-2.5 bg-slate-50 dark:bg-bg-dark border border-gray-200 dark:border-border-dark rounded-lg text-sm font-mono text-slate-600 dark:text-text-main focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors"
/>
<button
onClick={handleSubmit}
disabled={submitting}
class="px-4 py-2.5 bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-lg text-sm font-medium text-slate-700 dark:text-text-main hover:bg-slate-50 dark:hover:bg-border-dark transition-colors"
>
{submitting ? t("submitting") : t("submit")}
</button>
</div>
</section>
)}
</>
);
}
|