mirror of
https://github.com/simstudioai/sim.git
synced 2026-10-28 02:41:36 +08:00
Waleed
66315f19e7
* improvement(docs): flatten the academy learn/chapters panels The "What you will learn" and "Chapters" panels were filled, bordered cards — the only boxed elements on the page. The docs design system is explicitly flat: global.css strips fumadocs cards/callouts/card-grids to transparent/divider-based, and the right-rail "On this page" TOC is small, muted, and borderless. - WhatYouWillLearn (inline): flat divider list like the FAQ, with a small panel label at the app's text scale instead of a page-h2-scale title - VideoChapters (right rail): borderless, matching the TOC — small muted label + flat hover rows, no card chrome * improvement(docs): drop the repeated per-row play icon from the chapters list The CirclePlay glyph repeated on every chapter row read as noise — a column of identical icons down the rail. The "On this page" TOC this list mirrors has no per-row icons; the timestamps already signal video chapters and the hover highlight signals they're seekable. Rows are now text + time only. * improvement(docs): drop the under-label rule on the learn callout A full-width rule under the small "What you will learn" label read as an awkward heading underline and blurred into the inter-item dividers. The label is now a quiet muted marker (matching the Chapters label and the TOC heading), with dividers only between items — so it never competes with the bold item titles or looks like an underlined heading.
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { cn } from '@/lib/utils'
|
|
|
|
interface LearnItem {
|
|
title: string
|
|
body: string
|
|
}
|
|
|
|
interface WhatYouWillLearnProps {
|
|
items: LearnItem[]
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* "What you will learn" — a flat callout matching the docs' flat/divider
|
|
* language. A quiet muted label (like the TOC heading) sits above the
|
|
* takeaways; dividers fall only between items, so the label reads as a marker
|
|
* rather than an underlined heading and never competes with the item titles.
|
|
*/
|
|
export function WhatYouWillLearn({ items, className }: WhatYouWillLearnProps) {
|
|
return (
|
|
<div className={cn('not-prose', className)}>
|
|
<p className='mb-3 font-medium text-[0.8125rem] text-[var(--text-muted)]'>
|
|
What you will learn
|
|
</p>
|
|
<div className='divide-y divide-[var(--border)]'>
|
|
{items.map((item) => (
|
|
<div key={item.title} className='py-3.5 first:pt-0 last:pb-0'>
|
|
<p className='mb-1 font-medium text-[var(--text-primary)] text-sm'>{item.title}</p>
|
|
<p className='m-0 text-[var(--text-secondary)] text-sm leading-relaxed'>{item.body}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|