import React, { memo } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import tw from 'twin.macro'; import isEqual from 'react-fast-compare'; interface Props { icon?: IconProp; title: string | React.ReactNode; className?: string; children: React.ReactNode; } const TitledGreyBox = ({ icon, title, children, className }: Props) => (
{typeof title === 'string' ? (

{icon && } {title}

) : ( title )}
{children}
); export default memo(TitledGreyBox, isEqual);