@conduction/components
Version:
React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)
48 lines (47 loc) • 2.27 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as styles from "./DownloadCard.module.css";
import _ from "lodash";
import clsx from "clsx";
import { Heading3, Link } from "@utrecht/component-library-react/dist/css-module";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faDatabase, faDownload, faFileAudio, faFileCsv, faFileImage, faFilePdf, faFileVideo, faFileWord, faFileZipper, } from "@fortawesome/free-solid-svg-icons";
export const DownloadCard = ({ icon, label, size, type, labelTooltip, layoutClassName, handleClick, }) => {
const onClick = (e) => {
e.preventDefault();
handleClick();
};
const getIconFromType = (type) => {
switch (_.toUpper(type)) {
case "PDF":
return faFilePdf;
case "DOC":
case "DOCX":
case "RTF":
case "TXT":
return faFileWord;
case "CSV":
return faFileCsv;
case "JPG":
case "PNG":
case "SVG":
case "GIF":
return faFileImage;
case "MP3":
case "WAV":
return faFileAudio;
case "MP4":
case "AVI":
case "MPG":
case "MPEG":
case "MOV":
return faFileVideo;
case "7Z":
case "ZIP":
case "RAR":
return faFileZipper;
default:
return faDatabase;
}
};
return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsx("div", { className: styles.icon, children: _jsx(FontAwesomeIcon, { icon: icon ?? getIconFromType(type) }) }), _jsxs("div", { className: styles.content, children: [_jsx(Heading3, { "data-tooltip-id": labelTooltip && labelTooltip.id, "data-tooltip-content": labelTooltip && labelTooltip.tooltip, className: styles.title, children: label }), _jsxs("div", { children: ["(", _.toUpper(type), size && `, ${size}`, ")"] })] }), _jsxs(Link, { className: styles.link, href: "", onClick: (e) => onClick(e), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " Download"] })] }));
};