My personal website
renderg.host
1import { Heading } from '@/components/Heading/Heading';
2import { Paragraph } from '@/components/Paragraph/Paragraph';
3import React from 'react';
4import { DATE_FORMAT_OPTIONS } from './CardArticle.constants';
5import * as styles from './CardArticle.styles';
6import { CardArticleProps } from './CardArticle.types';
7
8export const CardArticle: React.FC<CardArticleProps> = ({ article }) => {
9 const formattedDate = new Date(article.published).toLocaleDateString('en-US', DATE_FORMAT_OPTIONS);
10
11 return (
12 <a href={article.articleUrl} target="_blank" rel="noopener noreferrer" className={styles.cardWrapper}>
13 {/* Cover Image (if available) */}
14 {article.coverImage && (
15 <div className={styles.coverImageContainer}>
16 <img src={article.coverImage} alt="" className={styles.coverImage} />
17 </div>
18 )}
19
20 {/* Content */}
21 <div className={styles.contentContainer}>
22 <div className={styles.detailContainer}>
23 {/* Title */}
24 <Heading level={3} size="md">
25 {article.title}
26 </Heading>
27
28 {/* Description */}
29 {article.subtitle && <Paragraph size="base">{article.subtitle}</Paragraph>}
30 </div>
31 {/* Publication Name (left) and Date (right) */}
32 <div className={styles.metaContainer}>
33 <div className={styles.publicationContainer}>
34 {article.publicationIcon && <img src={article.publicationIcon} alt="" className={styles.publicationIcon} />}
35 <span className={styles.publicationName}>{article.publication}</span>
36 </div>
37 <span className={styles.date}>{formattedDate}</span>
38 </div>
39 </div>
40 </a>
41 );
42};