@conduction/components
Version:
React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)
11 lines (10 loc) • 1.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as styles from "./ImageAndDetailsCard.module.css";
import clsx from "clsx";
import { Link } from "@utrecht/component-library-react/dist/css-module";
import { navigate } from "gatsby";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
export const ImageAndDetailsCard = ({ image, title, subHeader, introduction, link, layoutClassName, }) => {
return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.image, children: image }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsxs(Link, { onClick: () => navigate(link.href), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faArrowRight }), " ", link.label] }) })] })] }));
};