Shared/PageTitle

Date Based Note

Default

bodyprefixextra Prefixis Date Based Note

Long Title

Product Page

Update Date Only

With Extra Prefix

With Prefix

Component Source

page-title.tsx

import type { FunctionComponent, ComponentChildren } from 'preact';
interface PageTitleProps {
  extraPrefix?: string | null;
  prefix?: string | null;
  body: string;
  isDateBasedNote?: boolean;
  createdDate?: string | null;
  updatedDate?: string | null;
  children?: ComponentChildren; // For categories
}

const PageTitle: FunctionComponent<PageTitleProps> = ({
  extraPrefix,
  prefix,
  body,
  isDateBasedNote = false,
  createdDate,
  updatedDate,
  children,
}) => {
  return (
    <div className={'lg:order-2 border-zd-white border-b lg:border-b-0 xl:border-b'}>
      <h1
        className={`border-zd-white border-t-4 xl:border-t-8 pt-vgap-sm text-lg md:text-xl xl:text-xl 2xl:text-2xl pb-vgap-sm text-shadow-md font-futura ${isDateBasedNote ? 'lg:pt-vgap-md' : 'lg:pt-vgap-md xl:pt-vgap-lg lg:text-2xl'}`}
      >
        {extraPrefix && (
          <span className="hidden xl:block font-bold xl:font-normal">{extraPrefix}</span>
        )}
        {prefix && (
          <span className="xl:block font-bold xl:font-normal xl:pb-vgap-sm 2xl:pb-0">{prefix}</span>
        )}
        <span
          className={
            'xl:block xl:text-3xl 2xl:text-5xl xl:pt-vgap-sm 2xl:pb-vgap-md font-bold xl:font-normal'
          }
        >
          <span className="xl:inline-block xl:min-w-4/5">
            {body}
            {/* title border */}
            <span
              className={
                'hidden xl:block xl:mt-vgap-md 2xl:mt-vgap-md h-1px bg-linear-to-r from-zd-white to-zd-black'
              }
            ></span>
          </span>
        </span>
      </h1>
      <div className="pb-vgap-sm text-xs md:text-sm lg:text-base leading-snug">
        {isDateBasedNote && createdDate && (
          <>
            <span className="whitespace-nowrap">
              <span className="font-futura tracking-wider">作成: {createdDate}</span>{' '}
              <span className="text-zd-gray" aria-hidden>
                |
              </span>
            </span>{' '}
          </>
        )}
        {updatedDate && (
          <>
            <span className="whitespace-nowrap">
              <span className="font-futura tracking-wider">更新: {updatedDate}</span>{' '}
              <span className="text-zd-gray" aria-hidden>
                |
              </span>
            </span>{' '}
          </>
        )}
        <span className="whitespace-nowrap">Author: Takazudo</span>
      </div>
      {children}
    </div>
  );
};

export default PageTitle;

Story Source

page-title.stories.tsx

import PageTitle from './page-title';
import type { ControlsMap } from '../../sub-packages/styleguide-v2/src/data/control-types';

/**
 * PageTitle Component
 *
 * Used for displaying page/article titles with optional metadata
 * like creation date, update date, and prefix text.
 *
 * Features:
 * - Responsive typography scaling
 * - Optional extra prefix, prefix, and body text
 * - Date display for date-based notes
 * - Gradient underline on large screens
 */
export const meta = {
  title: 'Shared/PageTitle',
};

export const controls: ControlsMap = {
  body: { type: 'text', default: 'モジュラーシンセサイザー入門' },
  prefix: { type: 'text', default: '' },
  extraPrefix: { type: 'text', default: '' },
  isDateBasedNote: { type: 'boolean', default: false },
};

/**
 * Default - Simple title
 */
export const Default = {
  args: {
    body: 'モジュラーシンセサイザー入門',
    prefix: '',
    extraPrefix: '',
    isDateBasedNote: false,
  },
  render: ({
    body,
    prefix,
    extraPrefix,
    isDateBasedNote,
  }: {
    body: string;
    prefix: string;
    extraPrefix: string;
    isDateBasedNote: boolean;
  }) => (
    <PageTitle
      body={body}
      prefix={prefix || undefined}
      extraPrefix={extraPrefix || undefined}
      isDateBasedNote={isDateBasedNote}
    />
  ),
};

/**
 * With prefix text
 */
export const WithPrefix = () => <PageTitle prefix="GUIDE" body="モジュラーシンセサイザー入門" />;

/**
 * With extra prefix (visible on XL screens)
 */
export const WithExtraPrefix = () => (
  <PageTitle extraPrefix="COLUMN" prefix="#001" body="モジュラーシンセサイザーの魅力" />
);

/**
 * Date-based note with creation and update dates
 */
export const DateBasedNote = () => (
  <PageTitle
    body="Make Noise Maths 組み立てガイド"
    isDateBasedNote
    createdDate="2024-01-15"
    updatedDate="2024-02-20"
  />
);

/**
 * Update date only (not a date-based note)
 */
export const UpdateDateOnly = () => (
  <PageTitle prefix="PRODUCT" body="Plaits" updatedDate="2024-03-01" />
);

/**
 * Product page style
 */
export const ProductPage = () => (
  <PageTitle
    extraPrefix="MUTABLE INSTRUMENTS"
    prefix="Product"
    body="Plaits"
    updatedDate="2024-03-01"
  />
);

/**
 * Long title text
 */
export const LongTitle = () => (
  <PageTitle
    prefix="GUIDE"
    body="モジュラーシンセサイザーの基本的な使い方とパッチングテクニック入門ガイド"
    isDateBasedNote
    createdDate="2024-01-15"
    updatedDate="2024-02-20"
  />
);