9fc1344177
Major Changes: - Replaced static preview with dynamic SVG door visualizer - Integrated Zustand for real-time state management - Redesigned UI with Dark Green (#1A2E2E) and Pistachio (#C4D668) colors - Removed all orange branding (brand-orange) - Premium selection tiles with active/inactive states - Live door rendering that updates instantly on selection Features: - Dynamic SVG draws door based on configuration - Real-time updates: doorType, gridType, finish, handle - Background room image with semi-transparent overlay - Animated "Live Voorbeeld" badge with pulse effect - Configuration info card showing current selections - Premium typography with Inter font Technical: - Added Zustand state management (lib/store.ts) - Created DoorVisualizer component with SVG logic - Updated step-product and step-options with premium tiles - Color swatches for finish selection - Check icons for selected states Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { create } from 'zustand';
|
|
|
|
export type DoorType = 'taats' | 'scharnier' | 'paneel';
|
|
export type GridType = '3-vlak' | '4-vlak' | 'geen';
|
|
export type Finish = 'zwart' | 'brons' | 'grijs';
|
|
export type Handle = 'u-greep' | 'klink' | 'geen';
|
|
|
|
interface ConfiguratorState {
|
|
doorType: DoorType;
|
|
gridType: GridType;
|
|
finish: Finish;
|
|
handle: Handle;
|
|
width: number;
|
|
height: number;
|
|
|
|
setDoorType: (type: DoorType) => void;
|
|
setGridType: (type: GridType) => void;
|
|
setFinish: (finish: Finish) => void;
|
|
setHandle: (handle: Handle) => void;
|
|
setDimensions: (width: number, height: number) => void;
|
|
}
|
|
|
|
export const useConfiguratorStore = create<ConfiguratorState>((set) => ({
|
|
doorType: 'taats',
|
|
gridType: '3-vlak',
|
|
finish: 'zwart',
|
|
handle: 'u-greep',
|
|
width: 1000,
|
|
height: 2400,
|
|
|
|
setDoorType: (doorType) => set({ doorType }),
|
|
setGridType: (gridType) => set({ gridType }),
|
|
setFinish: (finish) => set({ finish }),
|
|
setHandle: (handle) => set({ handle }),
|
|
setDimensions: (width, height) => set({ width, height }),
|
|
}));
|