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