My personal website
renderg.host
1import { CardNote } from '@/components/CardNote/CardNote';
2import React from 'react';
3import { useNavigate } from 'react-router-dom';
4import * as styles from './CardStudy.styles';
5import { BADGE_VARIANT, CASE_STUDIES_BASE_PATH, DATE_FORMAT_OPTIONS } from './CardStudy.constants';
6import { CardStudyProps } from './CardStudy.types';
7
8export const CardStudy: React.FC<CardStudyProps> = ({ caseStudy }) => {
9 const navigate = useNavigate();
10
11 return (
12 <CardNote
13 coverImage={caseStudy.coverImage}
14 badge={{
15 label: caseStudy.type,
16 variant: BADGE_VARIANT,
17 }}
18 meta={{
19 company: caseStudy.company,
20 date: new Date(caseStudy.endDate).toLocaleDateString('en-US', DATE_FORMAT_OPTIONS),
21 }}
22 title={caseStudy.name}
23 description={caseStudy.summary}
24 onClick={() => navigate(`${CASE_STUDIES_BASE_PATH}/${caseStudy.slug}`)}
25 className={styles.cardWrapper}
26 />
27 );
28};