import PageTitle from './page-title';
import type { ControlsMap } from '../../sub-packages/styleguide/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"
/>
);