src/components/Card.tsx - Code Metrics - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

src/components/Card.tsx A
last analyzed 2025-10-24 04:48 UTC

↳ Parent: Project

Complexity

Total Complexity	1
Complexity/F	0

Size

Lines of Code	235
Function Count	0

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	1
eloc	200
mnd	1
bc	1
fnc	0
dl	0
loc	235
rs	10
bpm	0
cpm	0
noi	0
c	0
b	0
f	0

import { CardImageOnlyProps, CardImageProps, CardProps, CardTeaserProps } from "../Types/Card"
import "./Card.scss"
import Icon from "./Icon"
import classNames from "classnames"
import { Link } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import React, { PropsWithChildren } from "react"

export const Card = ({ className, hasTable, title, titleIcon = ``, children }: PropsWithChildren<CardProps>) => (
  <article
    className={classNames(`card`, className, {
      "card--has-table": hasTable,
    })}
  >
    <header className="card__header">
      <h4 className="after-border">
        {titleIcon !== `` && <Icon icon={titleIcon} />} {title}
      </h4>
    </header>
    <div className="card__content">{children}</div>
  </article>
)

export const CardImageOnly = ({ picture, link }: CardImageOnlyProps) => {
  const image = getImage(picture)

  return (
    <article className={`card card--image-only`}>
      {!CheckExternalLink(link) && image && (
        <Link to={link}>
          <header>
            <figure>
              <GatsbyImage image={image} alt={link} />
            </figure>
          </header>
        </Link>
      )}
      {CheckExternalLink(link) && image && (
        <a href={link} target="_blank" rel="noopener noreferrer">
          <header>
            <GatsbyImage image={image} alt={link} />
          </header>
        </a>
      )}
    </article>
  )
}

export const CardImage = ({ title, picture, link = ``, body }: CardImageProps) => {
  const image = getImage(picture)

  return (
    <article className={`card card--teaser card--teaser--image`}>
      {link !== `` || (
        <>
          <header className={`card_header`}>
            {image && (
              <figure>
                <GatsbyImage image={image} alt={title} />
              </figure>
            )}
          </header>
          <main className={`card_content`}>
            <h4 className={`card_title`}>{title}</h4>
            {body && <div className={`card_body`} dangerouslySetInnerHTML={{ __html: body }}></div>}
          </main>
        </>
      )}
      {link !== `` && !CheckExternalLink(link) && (
        <Link to={link} title={title}>
          <header className={`card_header`}>
            {image && (
              <figure>
                <GatsbyImage image={image} alt={title} />
              </figure>
            )}
          </header>
          <main className={`card_content`}>
            <h4 className={`card_title`}>{title}</h4>
            {body && <div className={`card_body`} dangerouslySetInnerHTML={{ __html: body }}></div>}
          </main>
        </Link>
      )}
      {link !== `` && CheckExternalLink(link) && (
        <a href={link} title={title} target="_blank" rel="noopener noreferrer">
          <header className={`card_header`}>
            {image && (
              <figure>
                <GatsbyImage image={image} alt={title} />
              </figure>
            )}
          </header>
          <main className={`card_content`}>
            <h4 className={`card_title`}>{title}</h4>
            {body && <div className={`card_body`} dangerouslySetInnerHTML={{ __html: body }}></div>}
          </main>
        </a>
      )}
    </article>
  )
}

export const CardTeaser = ({ title, picture, link, tags, createTime }: CardTeaserProps) => {
  const image = getImage(picture)

  return (
    <article className={`card card--teaser`}>
      <Link to={link} title={title}>
        <header className={`card_header`}>
          {image && (
            <figure>
              <GatsbyImage image={image} alt={title} />
            </figure>
          )}
        </header>
        <main className={`card_content`}>
          <h4 className={`card_title`}>{title}</h4>
          <div className={`card_meta`}>
            {createTime && (
              <span className={`datetime`}>
                <Icon icon="fa-clock-o" />
                {createTime}
              </span>
            )}
            {tags && tags?.length > 0 && (
              <div className={`card_tags`}>
                <Icon icon="fa-tags" />
                {tags.map(({ name }, i) => (
                  <span className={`tag__label`} key={i}>
                    #{name}
                  </span>
                ))}
              </div>
            )}
          </div>
        </main>
      </Link>
    </article>
  )
}

export const CardTVTeaser = ({ title, picture, link }: CardTeaserProps) => {
  const image = getImage(picture)

  return (
    <article className={`card card--teaser card--teaser-tv`}>
      {!CheckExternalLink(link) && (
        <Link to={link} title={title}>
          <header className={`card_header`}>
            {image && (
              <>
                <figure>
                  <GatsbyImage image={image} alt={title} />
                </figure>
                <span className={`kcvvtv__play`}></span>
              </>
            )}
          </header>
          <main className={`card_content`}>
            <h4 className={`card_title`}>{title}</h4>
          </main>
        </Link>
      )}
      {CheckExternalLink(link) && (
        <a href={link} title={title} target="_blank" rel="noopener noreferrer">
          <header className={`card_header`}>
            {image && (
              <>
                <figure>
                  <GatsbyImage image={image} alt={title} />
                </figure>
                <span className={`kcvvtv__play`}></span>
              </>
            )}
          </header>
          <main className={`card_content`}>
            <h4 className={`card_title`}>{title}</h4>
          </main>
        </a>
      )}
    </article>
  )
}

export const CardHorizontal = ({ title, picture, link, body = `` }: CardTeaserProps) => {
  const image = getImage(picture)

  return (
    <article className={`card card--teaser card--teaser-horizontal`}>
      {!CheckExternalLink(link) && (
        <Link to={link} title={title}>
          <header className={`card_header`}>
            {image && (
              <figure>
                <GatsbyImage image={image} alt={title} />
              </figure>
            )}
          </header>
          <main className={`card_content`}>
            <h4 className={`card_title`}>{title}</h4>
            <p dangerouslySetInnerHTML={{ __html: body }} />
          </main>
        </Link>
      )}
      {CheckExternalLink(link) && (
        <a href={link} title={title} target="_blank" rel="noopener noreferrer">
          <header className={`card_header`}>
            {image && (
              <figure>
                <GatsbyImage image={image} alt={title} />
              </figure>
            )}
          </header>
          <main className={`card_content`}>
            <h4 className={`card_title`}>{title}</h4>
          </main>
        </a>
      )}
    </article>
  )
}

CardTeaser.defaultProps = {
  icon: undefined,
  body: undefined,
  metadata: false,
  tags: [],
  createTime: undefined,
}

const CheckExternalLink = (link: string) => {
  const absoluteUrlRegex = /^https?:\/\/|^\/\//i
  return absoluteUrlRegex.test(link)
}


1			import { CardImageOnlyProps, CardImageProps, CardProps, CardTeaserProps } from "../Types/Card"
2			import "./Card.scss"
3			import Icon from "./Icon"
4			import classNames from "classnames"
5			import { Link } from "gatsby"
6			import { GatsbyImage, getImage } from "gatsby-plugin-image"
7			import React, { PropsWithChildren } from "react"
8
9			export const Card = ({ className, hasTable, title, titleIcon = ``, children }: PropsWithChildren<CardProps>) => (
10			<article
11			className={classNames(`card`, className, {
12			"card--has-table": hasTable,
13			})}
14			>
15			<header className="card__header">
16			<h4 className="after-border">
17			{titleIcon !== `` && <Icon icon={titleIcon} />} {title}
18			</h4>
19			</header>
20			<div className="card__content">{children}</div>
21			</article>
22			)
23
24			export const CardImageOnly = ({ picture, link }: CardImageOnlyProps) => {
25			const image = getImage(picture)
26
27			return (
28			<article className={`card card--image-only`}>
29			{!CheckExternalLink(link) && image && (
30			<Link to={link}>
31			<header>
32			<figure>
33			<GatsbyImage image={image} alt={link} />
34			</figure>
35			</header>
36			</Link>
37			)}
38			{CheckExternalLink(link) && image && (
39			<a href={link} target="_blank" rel="noopener noreferrer">
40			<header>
41			<GatsbyImage image={image} alt={link} />
42			</header>
43			</a>
44			)}
45			</article>
46			)
47			}
48
49			export const CardImage = ({ title, picture, link = ``, body }: CardImageProps) => {
50			const image = getImage(picture)
51
52			return (
53			<article className={`card card--teaser card--teaser--image`}>
54			{link !== `` \|\| (
55			<>
56			<header className={`card_header`}>
57			{image && (
58			<figure>
59			<GatsbyImage image={image} alt={title} />
60			</figure>
61			)}
62			</header>
63			<main className={`card_content`}>
64			<h4 className={`card_title`}>{title}</h4>
65			{body && <div className={`card_body`} dangerouslySetInnerHTML={{ __html: body }}></div>}
66			</main>
67			</>
68			)}
69			{link !== `` && !CheckExternalLink(link) && (
70			<Link to={link} title={title}>
71			<header className={`card_header`}>
72			{image && (
73			<figure>
74			<GatsbyImage image={image} alt={title} />
75			</figure>
76			)}
77			</header>
78			<main className={`card_content`}>
79			<h4 className={`card_title`}>{title}</h4>
80			{body && <div className={`card_body`} dangerouslySetInnerHTML={{ __html: body }}></div>}
81			</main>
82			</Link>
83			)}
84			{link !== `` && CheckExternalLink(link) && (
85			<a href={link} title={title} target="_blank" rel="noopener noreferrer">
86			<header className={`card_header`}>
87			{image && (
88			<figure>
89			<GatsbyImage image={image} alt={title} />
90			</figure>
91			)}
92			</header>
93			<main className={`card_content`}>
94			<h4 className={`card_title`}>{title}</h4>
95			{body && <div className={`card_body`} dangerouslySetInnerHTML={{ __html: body }}></div>}
96			</main>
97			</a>
98			)}
99			</article>
100			)
101			}
102
103			export const CardTeaser = ({ title, picture, link, tags, createTime }: CardTeaserProps) => {
104			const image = getImage(picture)
105
106			return (
107			<article className={`card card--teaser`}>
108			<Link to={link} title={title}>
109			<header className={`card_header`}>
110			{image && (
111			<figure>
112			<GatsbyImage image={image} alt={title} />
113			</figure>
114			)}
115			</header>
116			<main className={`card_content`}>
117			<h4 className={`card_title`}>{title}</h4>
118			<div className={`card_meta`}>
119			{createTime && (
120			<span className={`datetime`}>
121			<Icon icon="fa-clock-o" />
122			{createTime}
123			</span>
124			)}
125			{tags && tags?.length > 0 && (
126			<div className={`card_tags`}>
127			<Icon icon="fa-tags" />
128			{tags.map(({ name }, i) => (
129			<span className={`tag__label`} key={i}>
130			#{name}
131			</span>
132			))}
133			</div>
134			)}
135			</div>
136			</main>
137			</Link>
138			</article>
139			)
140			}
141
142			export const CardTVTeaser = ({ title, picture, link }: CardTeaserProps) => {
143			const image = getImage(picture)
144
145			return (
146			<article className={`card card--teaser card--teaser-tv`}>
147			{!CheckExternalLink(link) && (
148			<Link to={link} title={title}>
149			<header className={`card_header`}>
150			{image && (
151			<>
152			<figure>
153			<GatsbyImage image={image} alt={title} />
154			</figure>
155			<span className={`kcvvtv__play`}></span>
156			</>
157			)}
158			</header>
159			<main className={`card_content`}>
160			<h4 className={`card_title`}>{title}</h4>
161			</main>
162			</Link>
163			)}
164			{CheckExternalLink(link) && (
165			<a href={link} title={title} target="_blank" rel="noopener noreferrer">
166			<header className={`card_header`}>
167			{image && (
168			<>
169			<figure>
170			<GatsbyImage image={image} alt={title} />
171			</figure>
172			<span className={`kcvvtv__play`}></span>
173			</>
174			)}
175			</header>
176			<main className={`card_content`}>
177			<h4 className={`card_title`}>{title}</h4>
178			</main>
179			</a>
180			)}
181			</article>
182			)
183			}
184
185			export const CardHorizontal = ({ title, picture, link, body = `` }: CardTeaserProps) => {
186			const image = getImage(picture)
187
188			return (
189			<article className={`card card--teaser card--teaser-horizontal`}>
190			{!CheckExternalLink(link) && (
191			<Link to={link} title={title}>
192			<header className={`card_header`}>
193			{image && (
194			<figure>
195			<GatsbyImage image={image} alt={title} />
196			</figure>
197			)}
198			</header>
199			<main className={`card_content`}>
200			<h4 className={`card_title`}>{title}</h4>
201			<p dangerouslySetInnerHTML={{ __html: body }} />
202			</main>
203			</Link>
204			)}
205			{CheckExternalLink(link) && (
206			<a href={link} title={title} target="_blank" rel="noopener noreferrer">
207			<header className={`card_header`}>
208			{image && (
209			<figure>
210			<GatsbyImage image={image} alt={title} />
211			</figure>
212			)}
213			</header>
214			<main className={`card_content`}>
215			<h4 className={`card_title`}>{title}</h4>
216			</main>
217			</a>
218			)}
219			</article>
220			)
221			}
222
223			CardTeaser.defaultProps = {
224			icon: undefined,
225			body: undefined,
226			metadata: false,
227			tags: [],
228			createTime: undefined,
229			}
230
231			const CheckExternalLink = (link: string) => {
232			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
233			return absoluteUrlRegex.test(link)
234			}
235

soniCaH / KCVV-Elewijt-Gatsby

src/components/Card.tsx A last analyzed 2025-10-24 04:48 UTC

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like

src/components/Card.tsx A
last analyzed 2025-10-24 04:48 UTC