Tidy invite delivery choices and align email fields

2026-09-06 22:38:17 +12:00
parent a32928b1c5
commit 212ac560ec
5 changed files with 92 additions and 26 deletions
@@ -0,0 +1,17 @@
+'use client'
+
+import './invite-delivery.css'
+
+export default function InviteDeliveryChoice({ value, onChange }: {
+  value: 'manual' | 'email' | '' | null; onChange: (method: 'manual' | 'email') => void
+}) {
+  return <div className="invite-delivery-options" role="group" aria-label="Invite delivery method">
+    {(['manual', 'email'] as const).map((method) => <button key={method} type="button" aria-pressed={value === method} onClick={() => onChange(method)}>
+      <span className="delivery-choice-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+        {method === 'manual' ? <><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-2 2" /><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l2-2" /></> : <><rect x="3" y="5" width="18" height="14" rx="3" /><path d="m3 7 9 6 9-6" /></>}
+      </svg></span>
+      <span className="delivery-choice-copy"><strong>{method === 'manual' ? 'Copy a link' : 'Send an email'}</strong><small>{method === 'manual' ? 'Share it yourself. No email needed.' : 'We’ll send the invite. You get the link too.'}</small></span>
+      <span className="delivery-choice-check" aria-hidden="true">{value === method ? '✓' : ''}</span>
+    </button>)}
+  </div>
+}