import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Masthead/masthead'; import { css } from '@patternfly/react-styles'; import { formatBreakpointMods } from '../../helpers/util'; import { PageContext } from '../Page/PageContext'; export interface MastheadProps extends React.DetailedHTMLProps, HTMLDivElement> { /** Content rendered inside of the masthead */ children?: React.ReactNode; /** Additional classes added to the masthead */ className?: string; /** Background theme color of the masthead */ backgroundColor?: 'dark' | 'light' | 'light200'; /** Display type at various breakpoints */ display?: { default?: 'inline' | 'stack'; sm?: 'inline' | 'stack'; md?: 'inline' | 'stack'; lg?: 'inline' | 'stack'; xl?: 'inline' | 'stack'; '2xl'?: 'inline' | 'stack'; }; /** Insets at various breakpoints */ inset?: { default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; }; } export const Masthead: React.FunctionComponent = ({ children, className, backgroundColor = 'dark', display = { md: 'inline' }, inset, ...props }: MastheadProps) => { const { width, getBreakpoint } = React.useContext(PageContext); return (
); }; Masthead.displayName = 'Masthead';