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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 1x 1x 1x 1x 1x 1x | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import { icon } from '../lib/loadIcons'
import { getIcon } from './MaterialIcon'
export interface ProfileCardProps {
dataCy?: string
cardId: string
cardName: string
cardHref: string
description?: string
aaPrefix?: string
prefixIcon?: string
}
const ProfileCard = ({
cardId,
cardName,
cardHref,
description,
aaPrefix,
prefixIcon,
}: ProfileCardProps) => {
return (
<div className="border-t-2 border-y-gray-100 text-base">
<Link
href={cardHref}
data-gc-analytics-customclick={`${aaPrefix}:${cardId}`}
>
<div className="m-4 grid grid-flow-col grid-cols-[36px_1fr_36px] grid-rows-2 items-center justify-items-center gap-2">
<div className="col-start-1 row-start-1 justify-self-center text-xl">
{getIcon(prefixIcon)}
</div>
<div className="col-start-2 row-start-1 justify-self-start font-display text-xl font-bold">
{cardName}
</div>
<div className="col-start-3 row-start-1 text-2xl">
<FontAwesomeIcon icon={icon['chevron-right']} />
</div>
<div className="col-start-2 row-start-2 justify-self-start text-base text-[#43474e]">
{description}
</div>
</div>
</Link>
</div>
)
}
export default ProfileCard
|