diff --git a/src/components/RightPanel/FrameLabelSection.tsx b/src/components/RightPanel/FrameLabelSection.tsx new file mode 100644 index 0000000..585a279 --- /dev/null +++ b/src/components/RightPanel/FrameLabelSection.tsx @@ -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 ( +
+

Frame Label

+ + 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 */} +
+ {PRESETS.map(p => ( + + ))} + {state.frameLabel && !PRESETS.includes(state.frameLabel) && ( + + )} +
+

Appears below the QR in preview & download.

+
+ ); +}