All files / components/Layout/Banner Banner.tsx

100% Statements 2/2
100% Branches 0/0
100% Functions 1/1
100% Lines 2/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31                            63x 3x                              
import { Headline } from '../../Headline/Headline'
 
type BannerProps = {
	/** Title of banner. */
	title: string
	/** Description of banner. */
	description: string
	/** Button to display. */
	button: React.ReactNode
}
 
/**
 * Banner for repeat call to action, looks best when using no container.
 */
export const Banner: React.FC<BannerProps> = ({ title, description, button }) => {
	return (
		<div className="bg-yellow py-12">
			<div className="container flex flex-col items-center justify-center">
				{/* Content Text */}
				<div className="mb-2 text-center md:mb-6 md:w-2/3 xl:w-1/2">
					<Headline level={4}>{title}</Headline>
					<p>{description}</p>
				</div>
 
				{/* Button */}
				{button}
			</div>
		</div>
	)
}