a511c95c7f
* turn article.scss into a module + componentized * Update Survey to use only component styles, add cancel button * Update GenericError + 404 page to use only standard classes * update LearningTrack to not use markdown-body * remove / consolidate stylesheets * cleanup Graphiql explorer page and scss * Componentize Breadcrumb styles * Componentize DeprecationBanner styles * scope h2 a link style to markdown-body * cleanup nav, organize page-header and page-footer components * remove unused scroll-button.scss * organize LanguagePicker and ProductPicker * add declarations file * remove featured-links.scss, update tests * update list utility and toc test * fix bad merge resolution * update breadcrumbs test
29 lines
763 B
TypeScript
29 lines
763 B
TypeScript
import React from 'react'
|
|
import cx from 'classnames'
|
|
import styles from './ArticleGridLayout.module.scss'
|
|
|
|
type Props = {
|
|
head?: React.ReactNode
|
|
toc?: React.ReactNode
|
|
children?: React.ReactNode
|
|
className?: string
|
|
}
|
|
export const ArticleGridLayout = ({ head, toc, children, className }: Props) => {
|
|
return (
|
|
<div className={cx(styles.container, className)}>
|
|
{/* head */}
|
|
{head && <div className={styles.head}>{head}</div>}
|
|
|
|
{/* toc */}
|
|
{toc && (
|
|
<div className={cx(styles.sidebar, 'border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0')}>
|
|
<div className={styles.sidebarContent}>{toc}</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* content */}
|
|
<div className={styles.content}>{children}</div>
|
|
</div>
|
|
)
|
|
}
|