MDX/Layout/LayoutDivide

Default

extra Wide

Component Source

layout-divide.tsx

import type { FunctionComponent, HTMLAttributes } from 'preact';
interface LayoutDivideProps extends HTMLAttributes<HTMLDivElement> {
  extraWide?: boolean;
}

export const LayoutDivide: FunctionComponent<LayoutDivideProps> = ({
  children,
  extraWide = false,
  className,
  ...props
}) => {
  const divideClass = `block pb-0 lg:pb-vgap-md lg:grid lg:grid-cols-2 lg:gap-x-hgap-lg ${extraWide ? 'xl:-mx-hgap-xl' : ''} ${className || ''}`;

  return (
    <div className={divideClass} data-component-name="LayoutDivide" {...props}>
      {children}
    </div>
  );
};

layout-divide-item.tsx

import type { FunctionComponent, HTMLAttributes } from 'preact';
type LayoutDivideItemProps = HTMLAttributes<HTMLDivElement>;

export const LayoutDivideItem: FunctionComponent<LayoutDivideItemProps> = ({
  children,
  className,
  ...props
}) => {
  const itemClass = `lg:pb-vgap-md lg:pb-0 ${className || ''}`;
  return (
    <div className={itemClass} data-component-name="LayoutDivideItem" {...props}>
      {children}
    </div>
  );
};

Story Source

import { LayoutDivide } from './layout-divide';
import { LayoutDivideItem } from './layout-divide-item';
import type { ControlsMap } from '../../../sub-packages/styleguide/src/data/control-types';

/**
 * LayoutDivide Component
 *
 * A two-column grid layout for side-by-side content in MDX articles.
 * Features:
 * - Responsive: stacked on mobile, side-by-side on desktop (lg+)
 * - Optional extraWide prop for extended width on XL screens
 * - Used with LayoutDivideItem for each column
 */
export const meta = {
  title: 'MDX/Layout/LayoutDivide',
};

export const controls: ControlsMap = {
  extraWide: { type: 'boolean', default: false },
};

/**
 * Default - Two column layout
 */
export const Default = {
  args: { extraWide: false },
  render: ({ extraWide }: { extraWide: boolean }) => (
    <LayoutDivide extraWide={extraWide}>
      <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>
  ),
};

/**
 * With extraWide prop
 */
export const ExtraWide = () => (
  <LayoutDivide extraWide>
    <LayoutDivideItem>
      <div className="bg-zd-gray2 p-hgap-md text-zd-white">
        <h4 className="font-bold pb-vgap-xs">拡張幅 - 左</h4>
        <p>extraWide=trueの場合、XL画面で横幅が拡張されます。</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 = () => (
  <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 = () => (
  <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>
);