Rename component folders, and prune styles

ui/v2.5/src/components/Performers/PerformerCard.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Card } from "react-bootstrap";
+import { Link } from "react-router-dom";
+import * as GQL from "src/core/generated-graphql";
+import { NavUtils, TextUtils } from "src/utils";
+
+interface IPerformerCardProps {
+  performer: GQL.PerformerDataFragment;
+  ageFromDate?: string;
+}
+
+export const PerformerCard: React.FC<IPerformerCardProps> = (
+  { performer, ageFromDate }
+) => {
+  const age = TextUtils.age(performer.birthdate, ageFromDate);
+  const ageString = `${age} years old${
+    ageFromDate ? " in this scene." : "."
+  }`;
+
+  function maybeRenderFavoriteBanner() {
+    if (performer.favorite === false) {
+      return;
+    }
+    return <div className="rating-banner rating-5">FAVORITE</div>;
+  }
+
+  return (
+    <Card className="performer-card">
+      <Link
+        to={`/performers/${performer.id}`}
+      >
+        <img
+          className="image-thumbnail card-image"
+          alt={performer.name ?? ''} src={performer.image_path ?? ''} />
+        {maybeRenderFavoriteBanner()}
+      </Link>
+      <div className="card-section">
+        <h5 className="text-truncate">{performer.name}</h5>
+        {age !== 0 ? <div className="text-muted">{ageString}</div> : ""}
+        <div className="text-muted">
+          Stars in {performer.scene_count}{" "}
+          <Link to={NavUtils.makePerformerScenesUrl(performer)}>
+            scenes
+          </Link>
+          .
+        </div>
+      </div>
+    </Card>
+  );
+};