portfolio/src/components/review.tsx

/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Rule } from "./rule";
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import type { JSX } from "react";

interface ReviewProperties {
  readonly name:       string;
  readonly date:       Date;
  readonly content:    string;
  readonly sourceIcon: IconDefinition;
  readonly sourceUrl:  string;
  readonly sourceName: string;
}

/**
 * Renders the view for a review.
 * @param properties - The review to render.
 * @returns A JSX element.
 */
export const Review = (properties: ReviewProperties): JSX.Element => {
  const { name, date, content, sourceIcon, sourceUrl, sourceName } = properties;
  return (
    <li className="mb-10 ms-6">
      <span className="absolute flex items-center justify-center
      w-6 h-6 bg-[--background] text-[--foreground] rounded-full -start-3">
        <FontAwesomeIcon icon={sourceIcon} />
      </span>
      <div className="items-center justify-between p-4 bg-white
        border border-gray-200 rounded-lg shadow-sm sm:flex
        dark:bg-gray-700 dark:border-gray-600">
        <time className="mb-1 text-xs font-normal
          text-gray-400 sm:order-last sm:mb-0">
          {date.toLocaleDateString("en-GB")}
        </time>
        <div className="text-md font-normal text-gray-500 dark:text-gray-300">
          {`Review from `}
          <a
            className="font-semibold text-[#abfcec] hover:underline"
            href={sourceUrl}
            rel="noopener noreferrer"
            target="_blank"
          >
            {name}
          </a>{` via `}
          <span className="bg-gray-100 text-gray-800 text-xs font-normal
            me-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">
            {sourceName}
          </span>
          <Rule />
          <p className="text-sm">{content}</p>
        </div>
      </div>
    </li>
  );
};