Function SubpageHeader

packages/dev/s2-docs/src/typography.tsx:245–279

({currentPage, parentPage, isLongForm}: SubpageHeaderProps)

}

export function SubpageHeader({currentPage, parentPage, isLongForm}: SubpageHeaderProps) {
  return (
    <div
      className={style({
        display: 'flex',
        flexDirection: 'column',
        gap: 4,
        maxWidth: '--text-width',
        marginX: 'auto',
        marginBottom: 40
      })}>
      <div className={style({display: 'flex', alignItems: 'center', gap: 2})}>
        <TitleLink href={parentPage?.url}>
          {parentPage?.exports?.title ??
            parentPage?.tableOfContents?.[0]?.title ??
            parentPage?.name}
        </TitleLink>
        <ChevronRightIcon styles={iconStyle({size: 'XS'})} />
      </div>
      <H1 itemProp="headline" isLongForm={isLongForm}>
        {currentPage.tableOfContents?.[0].title}
      </H1>
      {currentPage.exports?.author && (
        <Byline
          author={currentPage.exports.author}
          authorLink={currentPage.exports.authorLink}
          date={currentPage.exports.date}
        />
      )}
      {currentPage.exports?.date && !currentPage.exports?.author && (
        <Time date={currentPage.exports.date} />
      )}
    </div>
  );
}

export function Byline({
  author,