Something went wrong. Try again.
My personal website
Something went wrong. Try again.
1.5 kB · 41 lines
TSX
at commit 24619bea
123456789101112131415161718192021222324252627282930313233343536373839404142import React from 'react';import { Heading } from '../Heading/Heading';import { Paragraph } from '../Paragraph/Paragraph';import * as styles from './CardNote.styles';import { META_SEPARATOR } from './CardNote.constants';import { BaseCardNoteProps } from './CardNote.types';
export const CardNote: React.FC<BaseCardNoteProps> = ({ className, coverImage, badge, meta, title, description, onClick }) => { const CardWrapper = onClick ? 'button' : 'div';
return ( <CardWrapper className={styles.getCardWrapperStyles(onClick, className)} onClick={onClick}> {/* Cover Image */} {coverImage && ( <div className={styles.coverImageContainer}> <img src={coverImage} alt="" className={styles.coverImage} /> </div> )}
{/* Content */} <div className={styles.contentContainer}> {/* Badge + Meta */} <div className={styles.badgeMetaContainer}> {badge && <span className={styles.getBadgeStyles(badge.variant)}>{badge.label}</span>} {meta && ( <div className={styles.metaContainer}> {meta.company && <span>{meta.company}</span>} {meta.company && meta.date && <span>{META_SEPARATOR}</span>} {meta.date && <span>{meta.date}</span>} </div> )} </div>
{/* Title */} <Heading level={3} size="lg">{title}</Heading> {/* Description */} {description && <Paragraph>{description}</Paragraph>} </div> </CardWrapper> );};