CardWithIcon CardWithIcon.tsx

100% Statements 2/2

100% Branches 2/2

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63x
11x
 
 
 
 
 
 
 
 
 
 
 
  import { MaterialSymbol } from 'material-symbols'
import { Headline } from '../../Headline/Headline'
import { Icon } from '../../Icon/Icon'
 
export type CardWithIconProps = {
	/** Icon to display. */
	icon: MaterialSymbol
	/** Title of card. */
	title?: string
	/** Content of card. */
	children: React.ReactNode
}
 
/**
 * Card with an Icon.
 */
export const CardWithIcon: React.FC<CardWithIconProps> = ({ icon, title, children }) => {
	return (
		<div className="flex rounded-xl border border-gray-200 p-4 md:p-6">
			<div className="mr-4 flex h-12 w-12 min-w-[48px] items-center justify-center rounded-xl bg-yellow">
				<Icon icon={icon} />
			</div>
			<div>
				{title && <Headline level={5}>{title}</Headline>}
				{children}
			</div>
		</div>
	)
}