96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
import { useState } from 'react'
|
|
import cx from 'classnames'
|
|
import dayjs from 'dayjs'
|
|
import { GHAEReleaseNotePatch } from './GHAEReleaseNotePatch'
|
|
import { GHAEReleaseNotesContextT } from './types'
|
|
import { MarkdownContent } from 'components/ui/MarkdownContent'
|
|
|
|
import styles from './PatchNotes.module.scss'
|
|
|
|
type GitHubAEProps = {
|
|
context: GHAEReleaseNotesContextT
|
|
}
|
|
export function GHAEReleaseNotes({ context }: GitHubAEProps) {
|
|
const { releaseNotes, releases, currentVersion } = context
|
|
const [focusedPatch, setFocusedPatch] = useState('')
|
|
|
|
return (
|
|
<div className="d-flex">
|
|
<article className="min-width-0 flex-1">
|
|
<div className="d-flex flex-items-center flex-justify-between color-bg-default px-5 py-2">
|
|
<h1 id="title-h1" className="f4 py-3 m-0">
|
|
{currentVersion.planTitle} release notes
|
|
</h1>
|
|
</div>
|
|
|
|
<MarkdownContent data-search="article-body">
|
|
{releaseNotes.map((patch) => {
|
|
return (
|
|
<GHAEReleaseNotePatch
|
|
key={patch.version}
|
|
patch={patch}
|
|
currentVersion={currentVersion}
|
|
didEnterView={() => setFocusedPatch(patch.version)}
|
|
/>
|
|
)
|
|
})}
|
|
</MarkdownContent>
|
|
</article>
|
|
|
|
<aside
|
|
className={cx(
|
|
'position-sticky d-none d-md-block border-left no-print color-bg-default flex-shrink-0',
|
|
styles.aside,
|
|
)}
|
|
>
|
|
<nav className="height-full overflow-auto">
|
|
<MarkdownContent>
|
|
<ul className="list-style-none pl-0 text-bold">
|
|
{releases.map((release) => {
|
|
return (
|
|
<CollapsibleReleaseSection
|
|
key={release.version}
|
|
release={release}
|
|
focusedPatch={focusedPatch}
|
|
/>
|
|
)
|
|
})}
|
|
</ul>
|
|
</MarkdownContent>
|
|
</nav>
|
|
</aside>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const CollapsibleReleaseSection = ({
|
|
release,
|
|
focusedPatch,
|
|
}: {
|
|
release: GHAEReleaseNotesContextT['releases'][0]
|
|
focusedPatch: string
|
|
}) => {
|
|
return (
|
|
<li key={release.version} className="border-bottom">
|
|
<ul className="list-style-none py-4 px-0 my-0">
|
|
{release.patches.map((patch) => {
|
|
const isActive = patch.release === focusedPatch
|
|
return (
|
|
<li key={patch.release} className={cx('px-3 my-0', isActive && 'color-bg-accent')}>
|
|
<a
|
|
href={`#${patch.release}`}
|
|
className="d-flex flex-items-center flex-justify-between"
|
|
>
|
|
{patch.release}
|
|
<span className="color-fg-muted text-mono text-small text-normal">
|
|
{dayjs(patch.date).format('MMMM DD, YYYY')}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</li>
|
|
)
|
|
}
|