Outro

Dashed-top-border wrapper for a closing MDX block (`zd-prose-flow` for children spacing) — used for article afterwords / editorial notes.

Article Blocks

Default

With multiple blocks

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for Outro — new coverage (epic #1647, wave 6, #1662). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { Outro } from './outro'; import { P } from '@/components/article/p'; import { H3 } from '@/components/article/h3'; import { Ul } from '@/components/article/ul'; const meta: StoryMeta = { title: 'Outro', category: 'Article Blocks', description: 'Dashed-top-border wrapper for a closing MDX block (`zd-prose-flow` for children spacing) — used for article afterwords / editorial notes.', usage: `import { Outro } from '@/components/mdx/outro';\n\n<Outro>\n <p>まとめの文章です。</p>\n</Outro>`, }; export default meta; export const Default = defineStory({ name: 'Default', render: () => ( <div className="max-w-[700px]"> <Outro> <P>ここまでお読みいただきありがとうございました。ご質問はお気軽にどうぞ。</P> </Outro> </div> ), }); export const WithMultipleBlocks = defineStory({ name: 'With multiple blocks', render: () => ( <div className="max-w-[700px]"> <Outro> <H3>まとめ</H3> <P>今回はモジュラーシンセサイザーの基礎について解説しました。</P> <Ul> <li>VCO・VCF・VCAの役割</li> <li>パッチケーブルによる接続</li> <li>Eurorack規格の電源要件</li> </Ul> </Outro> </div> ), });