import { SectionHeading } from './section-heading';
import type { ControlsMap } from '../../sub-packages/styleguide/src/data/control-types';
/**
* SectionHeading Component
*
* A heading with a gradient border line above the text.
* Used for section titles across the site.
*
* Features:
* - Gradient border from white to black above the heading
* - Configurable heading level via `as` prop (h2–h6)
* - Optional subtitle separated by " / "
* - Futura font with bold weight
*/
export const meta = {
title: 'Shared/SectionHeading',
};
export const controls: ControlsMap = {
title: { type: 'text', default: 'PRODUCTS' },
titleSub: { type: 'text', default: '' },
as: { type: 'select', default: 'h2', options: ['h2', 'h3', 'h4', 'h5', 'h6'] },
};
/**
* Default - h2 heading with title only
*/
export const Default = {
args: { title: 'PRODUCTS', titleSub: '', as: 'h2' },
render: ({ title, titleSub, as: headingAs }: { title: string; titleSub: string; as: string }) => (
<SectionHeading
title={title}
titleSub={titleSub || undefined}
as={headingAs as 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}
/>
),
};
/**
* With subtitle text
*/
export const WithSubtitle = () => <SectionHeading title="GUIDES" titleSub="ガイド" />;
/**
* Rendered as h3
*/
export const AsH3 = () => <SectionHeading title="LATEST ARTICLES" titleSub="最新記事" as="h3" />;
/**
* Rendered as h4
*/
export const AsH4 = () => <SectionHeading title="RELATED" titleSub="関連情報" as="h4" />;
/**
* Long title text
*/
export const LongTitle = () => (
<SectionHeading
title="MODULAR SYNTHESIZER BEGINNERS GUIDE"
titleSub="モジュラーシンセサイザー入門ガイド"
/>
);
/**
* Multiple headings stacked to show visual hierarchy
*/
export const MultipleHeadings = () => (
<div className="flex flex-col gap-vgap-lg">
<SectionHeading title="SECTION ONE" titleSub="セクション1" as="h2" />
<SectionHeading title="SECTION TWO" titleSub="セクション2" as="h3" />
<SectionHeading title="SECTION THREE" titleSub="セクション3" as="h4" />
</div>
);