Import source: src/components/RightPanel/FrameLabelSection

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:17:14 +03:30
parent a389743e44
commit a0deff090e
1 changed files with 46 additions and 0 deletions
@@ -0,0 +1,46 @@
+import { useQR } from '../../context/QRContext';
+
+const PRESETS = ['SCAN ME', 'SCAN HERE', 'VISIT US', 'FOLLOW US', 'CONNECT'];
+
+export function FrameLabelSection() {
+  const { state, dispatch } = useQR();
+  const set = (v: string) => dispatch({ type: 'SET_FRAME_LABEL', payload: v });
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h3 className="text-[14px] font-semibold" style={{ color: 'var(--text-secondary)' }}>Frame Label</h3>
+
+      <input
+        type="text" maxLength={32} value={state.frameLabel} onChange={e => set(e.target.value)}
+        placeholder="e.g. SCAN ME"
+        className="h-11 px-3 rounded-[10px] text-[13px] font-semibold uppercase tracking-widest outline-none transition-all"
+        style={{ background: 'var(--bg-input)', border: '1px solid var(--border-sub)', color: 'var(--text-primary)', letterSpacing: '0.18em' }}
+        onFocus={e => { 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 = 'var(--border-sub)'; e.currentTarget.style.boxShadow = 'none'; }}
+      />
+
+      {/* Quick presets */}
+      <div className="flex flex-wrap gap-1.5">
+        {PRESETS.map(p => (
+          <button key={p} onClick={() => set(state.frameLabel === p ? '' : p)}
+            className="px-2.5 py-1 rounded-[7px] text-[11px] font-semibold tracking-wider cursor-pointer transition-all"
+            style={{
+              background: state.frameLabel === p ? 'rgba(124,111,224,0.15)' : 'var(--bg-elevated)',
+              border: `1px solid ${state.frameLabel === p ? 'rgba(124,111,224,0.4)' : 'var(--border-sub)'}`,
+              color: state.frameLabel === p ? '#7C6FE0' : 'var(--text-muted)',
+            }}>
+            {p}
+          </button>
+        ))}
+        {state.frameLabel && !PRESETS.includes(state.frameLabel) && (
+          <button onClick={() => set('')}
+            className="px-2.5 py-1 rounded-[7px] text-[11px] font-medium cursor-pointer"
+            style={{ background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)', color: '#ef4444' }}>
+            Clear
+          </button>
+        )}
+      </div>
+      <p className="text-[11px]" style={{ color: 'var(--text-dim)' }}>Appears below the QR in preview &amp; download.</p>
+    </div>
+  );
+}