arsam/qrcode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Import source: src/components/RightPanel/CornerStyleSection

Browse Source 
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
2026-09-18 23:17:10 +03:30
parent 79989d9529
commit e67f82e153
1 changed files with 62 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/RightPanel/CornerStyleSection.tsx
+62
View File
@@ -0,0 +1,62 @@
import { useQR } from '../../context/QRContext';
import type { CornerSquareStyle, CornerDotStyle } from '../../types';
const CS_OPTIONS: { value: CornerSquareStyle; label: string; preview: string }[] = [
{ value: 'square', label: 'Square', preview: 'M2,2 h12 v12 h-12 z M4,4 h8 v8 h-8 z' },
{ value: 'extra-rounded', label: 'Rounded', preview: 'M5,2 h6 a3,3 0 0 1 3,3 v6 a3,3 0 0 1 -3,3 h-6 a3,3 0 0 1 -3,-3 v-6 a3,3 0 0 1 3,-3 z M6,5 h4 a1,1 0 0 1 1,1 v4 a1,1 0 0 1 -1,1 h-4 a1,1 0 0 1 -1,-1 v-4 a1,1 0 0 1 1,-1 z' },
{ value: 'dot', label: 'Dot', preview: 'M8,1 a7,7 0 1 1 0,14 a7,7 0 0 1 0,-14 z M8,4 a4,4 0 1 0 0,8 a4,4 0 0 0 0,-8 z' },
];
const CD_OPTIONS: { value: CornerDotStyle; label: string }[] = [
{ value: 'square', label: 'Square' },
{ value: 'dot', label: 'Dot' },
];
export function CornerStyleSection() {
const { state, dispatch } = useQR();
return (
<div className="flex flex-col gap-3">
<h3 className="text-[14px] font-semibold" style={{ color: 'var(--text-secondary)' }}>Corner Style</h3>
<div className="flex flex-col gap-2">
<span className="text-[12px]" style={{ color: 'var(--text-muted)' }}>Finder squares</span>
<div className="flex gap-2">
{CS_OPTIONS.map(opt => (
<button key={opt.value} onClick={() => dispatch({ type: 'SET_CORNER_SQUARE', payload: opt.value })}
className="flex-1 flex flex-col items-center gap-1.5 py-2.5 rounded-[10px] cursor-pointer transition-all"
style={{
border: state.cornerSquareStyle === opt.value ? '2px solid #7C6FE0' : '1px solid var(--border-sub)',
background: state.cornerSquareStyle === opt.value ? 'var(--sel-bg)' : 'var(--bg-card)',
}}>
<svg width="20" height="16" viewBox="0 0 16 16" fill="none"
style={{ color: state.cornerSquareStyle === opt.value ? '#7C6FE0' : 'var(--text-secondary)' }}>
<path d={opt.preview} fill="currentColor" fillRule="evenodd"/>
</svg>
<span className="text-[11px] font-medium" style={{ color: state.cornerSquareStyle === opt.value ? 'var(--sel-text)' : 'var(--text-muted)' }}>
{opt.label}
</span>
</button>
))}
</div>
</div>
<div className="flex flex-col gap-2">
<span className="text-[12px]" style={{ color: 'var(--text-muted)' }}>Inner dot</span>
<div className="flex gap-2">
{CD_OPTIONS.map(opt => (
<button key={opt.value} onClick={() => dispatch({ type: 'SET_CORNER_DOT', payload: opt.value })}
className="flex-1 h-9 rounded-[9px] text-[13px] font-medium cursor-pointer transition-all"
style={{
border: state.cornerDotStyle === opt.value ? '2px solid #7C6FE0' : '1px solid var(--border-sub)',
background: state.cornerDotStyle === opt.value ? 'var(--sel-bg)' : 'var(--bg-card)',
color: state.cornerDotStyle === opt.value ? 'var(--sel-text)' : 'var(--text-secondary)',
}}>
{opt.label}
</button>
))}
</div>
</div>
</div>
);
}