Template
mats
47127db84b
- tokens.css: full token layer (type scale rem-based, palette, spacing, radii) - App.css rebuilt token-driven; zero hardcoded colors/px font sizes - readability preset: --root-font-size 112%; button matrix scrolls when narrow - App.tsx split into real components (Hero, CodeSample, RightRail + reflow) - light theme via [data-theme=light] overrides; topbar sun/moon toggle persisted - scripts/check-tokens.mjs + npm run check (lint, token guard, tsc, build) - AGENTS.md: token contract, check gate, preview workflow
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { Button } from './Button'
|
|
import { Icon } from './Icon'
|
|
|
|
type RightRailProps = { sections: string[] }
|
|
|
|
export function RightRail({ sections }: RightRailProps) {
|
|
return (
|
|
<aside className="right-rail">
|
|
<div className="rail-card">
|
|
<span className="eyebrow">On this page</span>
|
|
{sections.map((label, i) => (
|
|
<a className={i === 0 ? 'rail-link active' : 'rail-link'} href={i === 0 ? '#button-matrix' : '#'} key={label}>
|
|
<span>0{i + 1}</span>
|
|
{label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<div className="rail-card release">
|
|
<div className="release-icon">
|
|
<Icon name="layers" size={18} />
|
|
</div>
|
|
<strong>Designed to be extended</strong>
|
|
<p>Bring your brand, keep the rhythm. Tokens are portable and components stay unopinionated.</p>
|
|
<button className="text-button">
|
|
Read the docs <Icon name="arrow" size={14} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="rail-card">
|
|
<span className="eyebrow">Need a hand?</span>
|
|
<p className="rail-copy">Check the contribution guide or say hello in the community.</p>
|
|
<Button variant="secondary" className="full">
|
|
Open community <span>↗</span>
|
|
</Button>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|