index.tsx

import React from "react";
import styles from "./style.module.scss";

import classNames from "classnames";

import applicationPDF from "assets/images/pdf-banner.png";
import applicationDocument from "assets/images/document-banner.png";
import applicationVideo from "assets/images/video-banner.png";

import Badge from "react-bootstrap/Badge";
import Card from "react-bootstrap/Card";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconDefinition } from "@fortawesome/free-solid-svg-icons";

export interface FileCardProps {
  title: string;
  type: string;
  tags: string[];
  icon: IconDefinition;
  onIconClick: (event: React.MouseEvent) => void;
  onClick: (event: React.MouseEvent) => void;
  onMouseOver: (event: React.MouseEvent) => void;
  onMouseOut: (event: React.MouseEvent) => void;
}

const FileCard: React.FC<FileCardProps> = ({
  title,
  type,
  tags,
  icon,
  onIconClick,
  onClick,
  onMouseOver,
  onMouseOut,
}: FileCardProps) => {
	let banner: string;
	switch (type) {
		case "pdf":
			banner = applicationPDF;
			break;
		case "video":
			banner = applicationVideo;
			break;
		default:
			banner = applicationDocument;
			break;
	}
  return (
    <Card
      className={styles.fileCard}
      onClick={onClick}
      onMouseOver={onMouseOver}
      onMouseOut={onMouseOut}
    >
      <Card.Img variant="top" src={banner} />
      <Card.Body>
        <Card.Title style={{ wordWrap: "break-word" }}>{title}</Card.Title>
        <FontAwesomeIcon
          style={{ marginLeft: "8px", fontSize: "1.125rem", cursor: "default"}}
          icon={icon}
          onClick={onIconClick}
        />
      </Card.Body>
      <Card.Footer>
        {tags.map((tag) => (
          <Badge
            pill
            key={tag}
            className={classNames(
              styles.fileTag,
              tag === "new" ? styles.tagTeal : styles.tagBlue
            )}
          >
            {tag}
          </Badge>
        ))}
      </Card.Footer>
    </Card>
  );
};

export default FileCard;