Import source: src/components/LeftPanel/LeftPanel
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
@@ -0,0 +1,32 @@
|
|||||||
|
import { useQR } from '../../context/QRContext';
|
||||||
|
import { QR_TYPES } from '../../config/qrTypes';
|
||||||
|
import { TypeListItem } from './TypeListItem';
|
||||||
|
|
||||||
|
export function LeftPanel() {
|
||||||
|
const { state, dispatch } = useQR();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex-shrink-0 flex flex-col h-full overflow-y-auto"
|
||||||
|
style={{
|
||||||
|
width: 'var(--left-w)',
|
||||||
|
background: 'var(--bg-panel)',
|
||||||
|
borderRight: '1px solid var(--border)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="p-4 xl:p-6 pb-3">
|
||||||
|
<h2 className="text-[16px] xl:text-[19px] font-bold" style={{ color: 'var(--text-primary)' }}>Select QR type</h2>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1 px-2 xl:px-3 pb-6">
|
||||||
|
{QR_TYPES.map((config) => (
|
||||||
|
<TypeListItem
|
||||||
|
key={config.key}
|
||||||
|
config={config}
|
||||||
|
selected={state.selectedType === config.key}
|
||||||
|
onClick={() => dispatch({ type: 'SET_TYPE', payload: config.key })}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user