MDX/Layout/Column

Default

content

Multiple Columns

Technical Spec

With Heading

With List

Component Source

column.tsx

import type { FunctionComponent, ComponentChildren } from 'preact';
interface ColumnProps {
  children: ComponentChildren;
}

export const Column: FunctionComponent<ColumnProps> = ({ children }) => {
  return (
    <div className="pt-vgap-sm md:pt-vgap-md pb-vgap-lg" data-component-column>
      <div className={'border border-zd-white px-hgap-sm md:px-hgap-md'}>{children}</div>
    </div>
  );
};

Story Source

column.stories.tsx

import { Column } from './column';
import type { ControlsMap } from '../../../sub-packages/styleguide-v2/src/data/control-types';

/**
 * Column Component
 *
 * A bordered container for highlighting content sections in MDX articles.
 * Features:
 * - White border for visual separation
 * - Responsive padding
 * - Used for callouts, asides, or featured content
 */
export const meta = {
  title: 'MDX/Layout/Column',
};

export const controls: ControlsMap = {
  content: {
    type: 'text',
    default:
      'これはColumnコンポーネントのデモです。ボーダーで囲まれたコンテンツエリアを作成します。',
  },
};

/**
 * Default - Simple text content
 */
export const Default = {
  args: {
    content:
      'これはColumnコンポーネントのデモです。ボーダーで囲まれたコンテンツエリアを作成します。',
  },
  render: ({ content }: { content: string }) => (
    <Column>
      <p className="text-zd-white">{content}</p>
    </Column>
  ),
};

/**
 * With heading and paragraph
 */
export const WithHeading = () => (
  <Column>
    <h3 className="text-zd-white text-lg font-bold pb-vgap-sm">コラム: モジュラーシンセの歴史</h3>
    <p className="text-zd-white">
      モジュラーシンセサイザーは1960年代にBob MoogやDon Buchlaによって開発されました。
      当初は巨大で高価な機材でしたが、2000年代以降のEurorack規格の普及により、
      より手軽に楽しめるようになりました。
    </p>
  </Column>
);

/**
 * With list content
 */
export const WithList = () => (
  <Column>
    <h4 className="text-zd-white font-bold pb-vgap-xs">基本モジュール構成</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 = () => (
  <Column>
    <h4 className="text-zd-white font-bold pb-vgap-xs">仕様</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 = () => (
  <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>
);