Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 90 91 92 93 94 95 96 97 98 | 5x 51x 40x 11x 5x 51x 141x | import React from "react"; import { Link, withPrefix } from "gatsby"; import Tag from "@/components/Tag"; import { parseImgur, SizeMapping } from "@/utils/images"; import * as style from "./index.module.scss"; const CardHeader = ({ url, image, title, index, }: { url: string; image: string; title: string; index: number; }) => { if (index > 1) { return ( <Link to={url}> <span className="visually-hidden">{title}</span> <div className={style.wrapper + " lozad"} data-background-image={parseImgur(image, SizeMapping.large)} title={title} aria-hidden="true" data-testid="card-header" /> </Link> ); } return ( <Link to={url}> <span className="visually-hidden">{title}</span> <div className={style.wrapper} style={{ backgroundImage: ` url(${parseImgur(image, SizeMapping.large)})`, }} title={title} aria-hidden="true" data-testid="card-header" /> </Link> ); }; const Card = ({ title, date, url, headerImage, description, tags = [], index, }: { title: string; date: string; url: string; headerImage?: string; description: string; tags: readonly (string | undefined)[]; index: number; }) => ( <div className="col-sm-12 pb-4" data-testid="card"> <div className={style.customCard}> {headerImage && ( <CardHeader url={withPrefix(url)} image={headerImage} title={title} index={index} /> )} <div className={style.data}> <div className={style.dataContent}> <div className={style.stats}> <span className={style.date}>{date?.split("T")[0]}</span> {tags.map((name, index) => ( <Tag name={name || ""} key={`${name}-${index}`} /> ))} </div> <Link to={withPrefix(url)}> <h3 className={style.title}>{title}</h3> </Link> <p>{description}</p> <Link to={withPrefix(url)}>....Read more....</Link> </div> </div> </div> </div> ); export default Card; |