Layout/Column

Bordered container for highlighting content sections in MDX articles. White border for visual separation, responsive padding — used for callouts, asides, or featured content.

Article Layout

Default

Content

With heading

With list

Technical spec

Multiple columns

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for Column — 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 rather than the legacy `lib/styleguide` re-export. import { defineStory } from '@takazudo-modular/ui-preact/story-contract'; import type { StoryMeta } from '@takazudo-modular/ui-preact/story-contract'; import { Column } from './column'; const meta: StoryMeta = { title: 'Layout/Column', category: 'Article Layout', description: 'Bordered container for highlighting content sections in MDX articles. White border for visual separation, responsive padding — used for callouts, asides, or featured content.', usage: `import { Column } from '@takazudo-modular/ui-preact/column';\n\n<Column>\n <p>コンテンツ</p>\n</Column>`, }; export default meta; /** Scene args for the interactive Default variant — `content` drives Column's children. */ interface ColumnArgs { content: string; } /** Default - Simple text content */ export const Default = defineStory<ColumnArgs>({ name: 'Default', controls: [ { type: 'text', prop: 'content', label: 'Content', defaultValue: 'これはColumnコンポーネントのデモです。ボーダーで囲まれたコンテンツエリアを作成します。', }, ], render: ({ content = 'これはColumnコンポーネントのデモです。ボーダーで囲まれたコンテンツエリアを作成します。', } = {}) => ( <Column> <p className="text-zd-white">{content}</p> </Column> ), }); /** With heading and paragraph */ export const WithHeading = defineStory({ name: 'With heading', render: () => ( <Column> <h3 className="text-zd-white text-lg font-bold">コラム: モジュラーシンセの歴史</h3> <p className="text-zd-white"> モジュラーシンセサイザーは1960年代にBob MoogやDon Buchlaによって開発されました。当初は巨大で高価な機材でしたが、2000年代以降のEurorack規格の普及により、より手軽に楽しめるようになりました。 </p> </Column> ), }); /** With list content */ export const WithList = defineStory({ name: 'With list', render: () => ( <Column> <h4 className="text-zd-white font-bold">基本モジュール構成</h4> <ul className="text-zd-white list-disc pl-hgap-md"> <li>VCO (Voltage Controlled Oscillator)</li> <li>VCF (Voltage Controlled Filter)</li> <li>VCA (Voltage Controlled Amplifier)</li> <li>ADSR Envelope Generator</li> <li>LFO (Low Frequency Oscillator)</li> </ul> </Column> ), }); /** Technical specification example */ export const TechnicalSpec = defineStory({ name: 'Technical spec', render: () => ( <Column> <h4 className="text-zd-white font-bold">仕様</h4> <table className="text-zd-white w-full"> <tbody> <tr> <td className="pr-hgap-md py-vgap-2xs">電源</td> <td>+12V @ 100mA, -12V @ 50mA</td> </tr> <tr> <td className="pr-hgap-md py-vgap-2xs">サイズ</td> <td>12HP x 3U</td> </tr> <tr> <td className="pr-hgap-md py-vgap-2xs">奥行き</td> <td>35mm</td> </tr> </tbody> </table> </Column> ), }); /** Multiple columns */ export const MultipleColumns = defineStory({ name: 'Multiple columns', render: () => ( <div className="flex flex-col gap-vgap-md max-w-[600px]"> <Column> <p className="text-zd-white"> <strong>ヒント 1:</strong> パッチングの際は、まず音源（VCO）から始めましょう。 </p> </Column> <Column> <p className="text-zd-white"> <strong>ヒント 2:</strong> フィルターのカットオフを調整して音色を変化させます。 </p> </Column> <Column> <p className="text-zd-white"> <strong>ヒント 3:</strong> LFOでモジュレーションを加えると動きのある音になります。 </p> </Column> </div> ), });