diff --git a/src/components/CenterPanel/forms/SMSForm.tsx b/src/components/CenterPanel/forms/SMSForm.tsx new file mode 100644 index 0000000..faa7ea3 --- /dev/null +++ b/src/components/CenterPanel/forms/SMSForm.tsx @@ -0,0 +1,32 @@ +import { useQR } from '../../../context/QRContext'; +import { TextareaInput } from '../../ui/TextareaInput'; + +function isValidPhone(v: string) { + if (!v.trim()) return true; + return /^\+?[\d\s\-().]{6,}$/.test(v.trim()); +} + +export function SMSForm() { + const { state, dispatch } = useQR(); + const { phoneNumber, message } = state.formData.sms; + const set = (field: string, value: string) => + dispatch({ type: 'SET_FORM_FIELD', qrType: 'sms', field, value }); + const valid = isValidPhone(phoneNumber); + + return ( +
+
+ + set('phoneNumber', e.target.value)} + placeholder="+1234567890" + className="h-12 px-4 rounded-[11px] text-[14px] outline-none transition-all" + style={{ background: 'var(--bg-input)', border: `1px solid ${!valid ? '#ef4444' : 'var(--border-sub)'}`, color: 'var(--text-primary)' }} + onFocus={e => { if (valid) { e.currentTarget.style.borderColor = '#7C6FE0'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(124,111,224,0.12)'; }}} + onBlur={e => { e.currentTarget.style.borderColor = valid ? 'var(--border-sub)' : '#ef4444'; e.currentTarget.style.boxShadow = 'none'; }} + /> + {!valid &&

Enter a valid phone number

} +
+ set('message', v)} placeholder="Your message..." /> +
+ ); +}