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