From e32e3b4a588d15f294536737acfd9f2e2437e6bb Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:16:49 +0330
Subject: [PATCH] Import source: src/components/CenterPanel/forms/SMSForm

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 src/components/CenterPanel/forms/SMSForm.tsx | 32 ++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/components/CenterPanel/forms/SMSForm.tsx

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 (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1.5">
+        <label className="text-[15px] font-semibold" style={{ color: 'var(--text-primary)' }}>Phone Number</label>
+        <input type="tel" value={phoneNumber} onChange={e => 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 && <p className="text-[12px]" style={{ color: '#ef4444' }}>Enter a valid phone number</p>}
+      </div>
+      <TextareaInput label="Message" optional value={message} onChange={v => set('message', v)} placeholder="Your message..." />
+    </div>
+  );
+}