index.tsx

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

import classNames from "classnames";

import applicationPDF from "assets/images/pdf-label.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) => {
  return (
    <Card
      className={styles.quickViewCard}
      onClick={onClick}
      onMouseOver={onMouseOver}
      onMouseOut={onMouseOut}
    >
      <Card.Img variant="top" src={applicationPDF} />
      <Card.Body>
        <Card.Title style={{ wordWrap: "break-word" }}>{title}</Card.Title>
        <FontAwesomeIcon
          style={{ fontSize: "1.125rem" }}
          icon={icon}
          onClick={onIconClick}
        />
      </Card.Body>
      <Card.Footer>
        {tags.map((tag) => (
          <Badge
            pill
            key={tag}
            className={classNames(
              styles.quickViewTag,
              tag === "new" ? styles.tagTeal : styles.tagBlue
            )}
          >
            {tag}
          </Badge>
        ))}
      </Card.Footer>
    </Card>
  );
};

export default FileCard;