|
| 1 | +import type { ReactElement } from 'react'; |
| 2 | +import Link from 'next/link'; |
| 3 | + |
| 4 | +/** |
| 5 | + * ReadTheDocsCta — bottom-of-page link from a value/pattern page to the |
| 6 | + * canonical mkdocs deep page (Issue #1025 / Epic #1026). |
| 7 | + * |
| 8 | + * Pattern: every value page on `/retailers/*` and pattern page on |
| 9 | + * `/builders/*` ends with a "Read the docs" CTA referencing the mkdocs |
| 10 | + * page that holds the deep treatment. The CTA is opt-in per page; pages |
| 11 | + * with no canonical doc just don't render it. |
| 12 | + * |
| 13 | + * `docsHref` is a SAME-DOMAIN absolute path under `/docs/`; `mkdocs` is |
| 14 | + * mounted as a sub-path so we never leave the SWA host. |
| 15 | + */ |
| 16 | + |
| 17 | +export type ReadTheDocsCtaProps = { |
| 18 | + docsHref: string; |
| 19 | + /** Display label, e.g., "Read the architecture overview". */ |
| 20 | + label: string; |
| 21 | + /** Optional second-line context. */ |
| 22 | + caption?: string; |
| 23 | + testId?: string; |
| 24 | +}; |
| 25 | + |
| 26 | +const SECTION_STYLE = { |
| 27 | + display: 'flex', |
| 28 | + flexDirection: 'column' as const, |
| 29 | + alignItems: 'flex-start', |
| 30 | + gap: '0.375rem', |
| 31 | + padding: 'clamp(1.25rem, 3vw, 2rem) 1.5rem', |
| 32 | + background: 'var(--sys-surface-base, var(--hp-bg))', |
| 33 | + borderRadius: 'var(--radius-lg, 1rem)', |
| 34 | + border: '1px dashed var(--sys-border, var(--hp-border))', |
| 35 | + maxWidth: '52rem', |
| 36 | + margin: '0 auto', |
| 37 | + width: '100%', |
| 38 | +}; |
| 39 | + |
| 40 | +const LABEL_STYLE = { |
| 41 | + display: 'inline-flex', |
| 42 | + alignItems: 'center', |
| 43 | + gap: '0.5rem', |
| 44 | + padding: '0.5rem 1rem', |
| 45 | + borderRadius: 'var(--radius-md, 0.5rem)', |
| 46 | + background: 'var(--sys-surface, var(--hp-surface))', |
| 47 | + border: '1px solid var(--sys-border, var(--hp-border))', |
| 48 | + color: 'var(--sys-text, var(--hp-text))', |
| 49 | + fontWeight: 600, |
| 50 | + textDecoration: 'none' as const, |
| 51 | + fontSize: '0.9375rem', |
| 52 | +}; |
| 53 | + |
| 54 | +const CAPTION_STYLE = { |
| 55 | + fontSize: '0.8125rem', |
| 56 | + color: 'var(--sys-text-muted, var(--hp-text-muted))', |
| 57 | +}; |
| 58 | + |
| 59 | +export function ReadTheDocsCta({ |
| 60 | + docsHref, |
| 61 | + label, |
| 62 | + caption, |
| 63 | + testId, |
| 64 | +}: ReadTheDocsCtaProps): ReactElement { |
| 65 | + return ( |
| 66 | + <aside data-testid={testId} data-read-the-docs style={SECTION_STYLE}> |
| 67 | + <Link href={docsHref} style={LABEL_STYLE} data-docs-href={docsHref}> |
| 68 | + <span aria-hidden="true">📘</span> |
| 69 | + <span>{label}</span> |
| 70 | + </Link> |
| 71 | + {caption ? <p style={CAPTION_STYLE}>{caption}</p> : null} |
| 72 | + </aside> |
| 73 | + ); |
| 74 | +} |
0 commit comments