Shared/PageHeading

Brands Page

title

title Sub

Component Source

page-heading.tsx

import type { ComponentChildren } from 'preact';

interface PageHeadingProps {
  title: string;
  titleSub?: string;
  children?: ComponentChildren;
  className?: string;
}

export const PageHeading = ({ title, titleSub, children, className }: PageHeadingProps) => {
  return (
    <h1
      className={`font-futura border-zd-white border-t-3 2xl:border-t-5 text-xl xl:text-2xl pt-vgap-md pb-vgap-md ${className ?? ''}`}
    >
      <span lang="en">{title}</span>
      {titleSub && (
        <>
          {' '}
          / <span className="text-[.75em]">{titleSub}</span>
        </>
      )}
      {children}
    </h1>
  );
};

Story Source

import { PageHeading } from './page-heading';
import type { ControlsMap } from '../../sub-packages/styleguide/src/data/control-types';

/**
 * PageHeading Component
 *
 * A top-level h1 heading for page titles with an English/Japanese dual display.
 * Features a top border and Futura font.
 *
 * Features:
 * - Top border (3px, 5px on 2xl)
 * - Main English title with optional Japanese subtitle
 * - Supports children for additional content below the title
 * - Futura font styling
 */
export const meta = {
  title: 'Shared/PageHeading',
};

export const controls: ControlsMap = {
  title: { type: 'text', default: 'GUIDES' },
  titleSub: { type: 'text', default: 'ガイド' },
};

/**
 * Default - English title only
 */
export const Default = {
  args: { title: 'GUIDES', titleSub: 'ガイド' },
  render: ({ title, titleSub }: { title: string; titleSub: string }) => (
    <PageHeading title={title} titleSub={titleSub || undefined} />
  ),
};

/**
 * With Japanese subtitle
 */
export const WithSubtitle = {
  args: { title: 'GUIDES', titleSub: 'ガイド' },
  render: ({ title, titleSub }: { title: string; titleSub: string }) => (
    <PageHeading title={title} titleSub={titleSub || undefined} />
  ),
};

/**
 * Products page style
 */
export const ProductsPage = () => <PageHeading title="PRODUCTS" titleSub="製品一覧" />;

/**
 * Brands page style
 */
export const BrandsPage = () => <PageHeading title="BRANDS" titleSub="ブランド" />;

/**
 * With children content below the heading
 */
export const WithChildren = () => (
  <PageHeading title="GUIDES" titleSub="ガイド">
    <p className="text-sm text-zd-gray mt-vgap-xs">
      モジュラーシンセサイザーに関するガイド記事の一覧です。
    </p>
  </PageHeading>
);

/**
 * Long title text
 */
export const LongTitle = () => (
  <PageHeading
    title="MODULAR SYNTHESIZER BEGINNERS GUIDE"
    titleSub="モジュラーシンセサイザー入門ガイド"
  />
);