thecodingtrain.com/src/components/GuideCard.js at main · CodingTrain/thecodingtrain.com · GitHub

50 lines (45 loc) · 1.3 KB

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

import React, { memo } from 'react';

import { Link } from 'gatsby';

import ButtonPanel from './ButtonPanel';

import Image from './Image';

import * as css from './GuideCard.module.css';

const GuideCard = ({ title, slug, meta, icon = '📒', description, image }) => {

// TODO refactor this to use a single ButtonPanel instance?

return (

<article className={css.root}>

<div className={css.top}>

<div className={css.icon}>{icon}</div>

<h2 className={css.title}>

<Link to={slug}>{title}</Link>

</h2>

</div>

<div className={css.bottom}>

<div className={css.left}>

<p className={css.description}>{description}</p>

<ButtonPanel

className={css.meta}

text={meta}

buttonLink={slug}

buttonText="Read"

variant="purple"

rainbow

/>

</div>

<div className={css.right}>

<Link to={slug}>

<Image image={image} imgClassName={css.img} />

</Link>

<ButtonPanel

className={css.meta}

text={meta}

buttonLink={slug}

buttonText="Read"

variant="purple"

rainbow

/>

</div>

</div>

</article>

);

};

export default memo(GuideCard);