blob: 722e5a5ec91af537897c79442822fc99d3569596 (
plain)
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
import type { FC } from 'react';
import type { Image as Img } from '../../../types';
import { ButtonLink, Heading, type HeadingLevel } from '../../atoms';
import { ResponsiveImage } from '../images';
import styles from './card.module.scss';
import { Meta, type MetaData } from './meta';
export type CardProps = {
/**
* Set additional classnames to the card wrapper.
*/
className?: string;
/**
* The card cover.
*/
cover?: Img;
/**
* The card id.
*/
id: string;
/**
* The card meta.
*/
meta?: MetaData;
/**
* The card tagline.
*/
tagline?: string;
/**
* The card title.
*/
title: string;
/**
* The title level (hn).
*/
titleLevel: HeadingLevel;
/**
* The card target.
*/
url: string;
};
/**
* Card component
*
* Render a link with minimal information about its content.
*/
export const Card: FC<CardProps> = ({
className = '',
cover,
id,
meta,
tagline,
title,
titleLevel,
url,
}) => {
const cardClass = `${styles.wrapper} ${className}`;
const headingId = `${id}-heading`;
return (
<ButtonLink aria-labelledby={headingId} className={cardClass} to={url}>
<article className={styles.article}>
<header className={styles.header}>
{cover ? (
<ResponsiveImage {...cover} className={styles.cover} />
) : null}
<Heading className={styles.title} id={headingId} level={titleLevel}>
{title}
</Heading>
</header>
{tagline ? <div className={styles.tagline}>{tagline}</div> : null}
{meta ? (
<footer className={styles.footer}>
<Meta
data={meta}
// eslint-disable-next-line react/jsx-no-literals -- Hardcoded config
layout="inline"
className={styles.list}
groupClassName={styles.meta__item}
labelClassName={styles.meta__label}
valueClassName={styles.meta__value}
/>
</footer>
) : null}
</article>
</ButtonLink>
);
};
|
