Conversation

Dialogue layout for interview- / podcast-style articles. Renders a vertical stack of speaker turns; the `role` prop on `<Turn>` switches the visual accent (`guest` accented, `host` secondary).

Article Blocks

Default

Multi-paragraph turn

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { Conversation, Turn } from './conversation'; const meta: StoryMeta = { title: 'Conversation', category: 'Article Blocks', description: 'Dialogue layout for interview- / podcast-style articles. Renders a vertical stack of speaker turns; the `role` prop on `<Turn>` switches the visual accent (`guest` accented, `host` secondary).', usage: `import { Conversation, Turn } from '@/components/mdx/conversation';\n\n<Conversation>\n <Turn speaker="ロブ（4ms）" role="host">質問テキスト…</Turn>\n <Turn speaker="リチャード・ディヴァイン" role="guest">回答テキスト…</Turn>\n</Conversation>`, }; export default meta; /** Default - a short two-party exchange */ export const Default = defineStory({ name: 'Default', render: () => ( <Conversation> <Turn speaker="ロブ（4ms）" role="host"> 4ms製品はいつから使っているんですか？ </Turn> <Turn speaker="リチャード・ディヴァイン" role="guest"> 最初にDanから買ったのはクロックディバイダーだったと思います。もう14、15年くらい前ですね。 </Turn> </Conversation> ), }); /** Multi-paragraph turn - body text flows with article spacing */ export const MultiParagraphTurn = defineStory({ name: 'Multi-paragraph turn', render: () => ( <Conversation> <Turn speaker="リチャード・ディヴァイン" role="guest"> ハードウェアに本格的に移ったきっかけは、ARP 2600を手に入れたときでした。これも質屋で見つけたんです。 リングモジュレーションとは何か、2つのオシレーター間のFMとは何か——音作りの基礎を全部この一台で学びました。 </Turn> <Turn speaker="ロブ（4ms）" role="host"> なるほど。Maxを使っていた時期もありましたよね？ </Turn> </Conversation> ), });