| 1 | --- |
| 2 | // A conversation in Chat, drawn the way the product shows it: a channel or |
| 3 | // DM header, then <Message> children. For examples in the guides. |
| 4 | interface Props { |
| 5 | /** `#web`, or a DM's title. */ |
| 6 | title: string; |
| 7 | /** One line under the title, such as the channel's topic. */ |
| 8 | topic?: string; |
| 9 | } |
| 10 | const { title, topic } = Astro.props; |
| 11 | --- |
| 12 | |
| 13 | <figure class="conversation not-content" aria-label={`An example conversation in ${title}`}> |
| 14 | <header> |
| 15 | <span class="title">{title}</span> |
| 16 | {topic && <span class="topic">{topic}</span>} |
| 17 | </header> |
| 18 | <div class="messages"><slot /></div> |
| 19 | </figure> |
| 20 | |
| 21 | <style> |
| 22 | .conversation { |
| 23 | margin-block: 1.5rem; |
| 24 | border: 1px solid var(--g1t-line); |
| 25 | border-radius: 0.875rem; |
| 26 | background: var(--g1t-surface); |
| 27 | overflow: hidden; |
| 28 | } |
| 29 | header { |
| 30 | display: flex; |
| 31 | align-items: baseline; |
| 32 | gap: 0.6rem; |
| 33 | padding: 0.7rem 1rem; |
| 34 | border-bottom: 1px solid var(--g1t-line); |
| 35 | } |
| 36 | .title { |
| 37 | color: var(--g1t-fg); |
| 38 | font-weight: 600; |
| 39 | font-size: 0.875rem; |
| 40 | } |
| 41 | .topic { |
| 42 | color: var(--g1t-faint); |
| 43 | font-size: 0.8125rem; |
| 44 | overflow: hidden; |
| 45 | text-overflow: ellipsis; |
| 46 | white-space: nowrap; |
| 47 | } |
| 48 | .messages { |
| 49 | padding-block: 0.4rem; |
| 50 | } |
| 51 | </style> |