Layout/LayoutDivide

Two-column grid layout for side-by-side content in MDX articles. Responsive: stacked on mobile, side-by-side on desktop (lg+). Used with `LayoutDivideItem` for each column.

Article Layout

Default

Specs comparison

Image and text

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for LayoutDivide — colocated in the reusable-UI package // (@takazudo-modular/ui-preact) as part of the wave-4 batch migration (#2052). // Migrated from `components/mdx/layout/`; imports the story contract from the // canonical package subpath. LayoutDivideItem lives in its own sibling dir and // has its own dedicated story; it is used here to demonstrate the pair in situ. import { defineStory } from '@takazudo-modular/ui-preact/story-contract'; import type { StoryMeta } from '@takazudo-modular/ui-preact/story-contract'; import { LayoutDivide } from './layout-divide'; import { LayoutDivideItem } from '../layout-divide-item/layout-divide-item'; const meta: StoryMeta = { title: 'Layout/LayoutDivide', category: 'Article Layout', description: 'Two-column grid layout for side-by-side content in MDX articles. Responsive: stacked on mobile, side-by-side on desktop (lg+). Used with `LayoutDivideItem` for each column.', usage: `import { LayoutDivide } from '@takazudo-modular/ui-preact/layout-divide';\nimport { LayoutDivideItem } from '@takazudo-modular/ui-preact/layout-divide-item';\n\n<LayoutDivide>\n <LayoutDivideItem>左</LayoutDivideItem>\n <LayoutDivideItem>右</LayoutDivideItem>\n</LayoutDivide>`, }; export default meta; /** Default - Two column layout */ export const Default = defineStory<Parameters<typeof LayoutDivide>[0]>({ name: 'Default', render: () => ( <LayoutDivide> <LayoutDivideItem> <div className="bg-zd-gray2 p-hgap-md text-zd-white"> <h4 className="font-bold pb-vgap-xs">左カラム</h4> <p>これは左側のコンテンツです。デスクトップでは2カラムで表示されます。</p> </div> </LayoutDivideItem> <LayoutDivideItem> <div className="bg-zd-gray2 p-hgap-md text-zd-white"> <h4 className="font-bold pb-vgap-xs">右カラム</h4> <p>これは右側のコンテンツです。モバイルでは縦に並びます。</p> </div> </LayoutDivideItem> </LayoutDivide> ), }); /** Comparison content (specs vs features) */ export const SpecsComparison = defineStory({ name: 'Specs comparison', render: () => ( <LayoutDivide> <LayoutDivideItem> <div className="text-zd-white"> <h4 className="font-bold pb-vgap-sm border-b border-zd-gray2 mb-vgap-sm">仕様</h4> <ul className="space-y-vgap-2xs"> <li>電源: +12V @ 80mA, -12V @ 30mA</li> <li>サイズ: 10HP</li> <li>奥行き: 28mm</li> <li>入力: 1V/Oct, FM, PWM</li> <li>出力: Saw, Square, Sub</li> </ul> </div> </LayoutDivideItem> <LayoutDivideItem> <div className="text-zd-white"> <h4 className="font-bold pb-vgap-sm border-b border-zd-gray2 mb-vgap-sm">特徴</h4> <ul className="space-y-vgap-2xs"> <li>アナログVCO</li> <li>精密なトラッキング</li> <li>スルーゼロFM対応</li> <li>ハードシンク入力</li> <li>低消費電力設計</li> </ul> </div> </LayoutDivideItem> </LayoutDivide> ), }); /** Image and text layout (simulated) */ export const ImageAndText = defineStory({ name: 'Image and text', render: () => ( <LayoutDivide> <LayoutDivideItem> <div className="bg-zd-gray2 aspect-square flex items-center justify-center text-zd-white"> [Image Placeholder] </div> </LayoutDivideItem> <LayoutDivideItem> <div className="text-zd-white"> <h4 className="font-bold pb-vgap-sm">製品説明</h4> <p className="pb-vgap-sm"> このモジュールは多機能なアナログオシレーターです。豊富な波形出力と変調入力を備えており、様々なサウンドデザインに対応します。 </p> <p>特にスルーゼロFM機能により、通常のFMでは得られない金属的なサウンドを生成できます。</p> </div> </LayoutDivideItem> </LayoutDivide> ), });