CaseBuilderPresetGrid

Preset cards for the current model. Each card previews the preset as a per-panel swatch strip so the primary/secondary split is visible; the active preset is marked.

Product-Specific Blocks

3DP presets

Acrylic presets

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for the Case Builder preset grid (#1931). Pure/sync render. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { PresetGrid } from './preset-grid'; import { getAllowedPresets } from './case-builder-logic'; const meta: StoryMeta = { title: 'CaseBuilderPresetGrid', category: 'Product-Specific Blocks', description: 'Preset cards for the current model. Each card previews the preset as a per-panel swatch strip so the primary/secondary split is visible; the active preset is marked.', usage: `import { PresetGrid } from '@/src/components/case-builder/preset-grid';\n\n<PresetGrid caseType="zudo-block-40-3DP-A" material="3dp" presets={...} activePresetId="yamikage" locale="ja" onApply={() => {}} />`, }; export default meta; const noop = () => {}; export const ThreeDPresets = defineStory({ name: '3DP presets', render: () => { const caseType = 'zudo-block-40-3DP-A'; return ( <div style={{ maxWidth: '560px' }}> <PresetGrid caseType={caseType} material="3dp" presets={getAllowedPresets(caseType, '3dp')} activePresetId="kurobeni" locale="ja" onApply={noop} /> </div> ); }, }); export const AcrylicPresets = defineStory({ name: 'Acrylic presets', render: () => { const caseType = 'zudo-block-40-ACR-A'; return ( <div style={{ maxWidth: '560px' }}> <PresetGrid caseType={caseType} material="acrylic" presets={getAllowedPresets(caseType, 'acrylic')} activePresetId="red" locale="en" onApply={noop} /> </div> ); }, });