ZudoBlockCase3dPreview

A 2-column grid of four static poster cards (one per case size), mirroring the net-diagram grid above it. Clicking a card opens a dialog with the live interactive 3D viewer for that size, plus a backdrop chooser, 3 color presets, and camera controls.

Product-Specific Blocks

Default (JA)

English

Narrow (320px)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ZudoBlockCase3dPreviewImpl } from './zudo-block-case-3d-preview-impl'; const meta: StoryMeta = { title: 'ZudoBlockCase3dPreview', category: 'Product-Specific Blocks', description: 'A 2-column grid of four static poster cards (one per case size), mirroring the net-diagram grid above it. Clicking a card opens a dialog with the live interactive 3D viewer for that size, plus a backdrop chooser, 3 color presets, and camera controls.', usage: `import { ZudoBlockCase3dPreview } from '@/components/mdx/zudo-block-case-3d-preview';\n\n<ZudoBlockCase3dPreview locale="ja" />`, }; export default meta; export const Default = defineStory({ name: 'Default (JA)', render: () => <ZudoBlockCase3dPreviewImpl locale="ja" />, }); export const English = defineStory({ name: 'English', render: () => <ZudoBlockCase3dPreviewImpl locale="en" />, }); export const Narrow = defineStory({ name: 'Narrow (320px)', render: () => ( <div className="w-full max-w-[320px]"> <ZudoBlockCase3dPreviewImpl locale="ja" /> </div> ), });