Sort performers in popover and card views (#1294)

ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import { Link } from "react-router-dom";
+import * as GQL from "src/core/generated-graphql";
+import { sortPerformers } from "src/core/performers";
+import { HoverPopover } from "./HoverPopover";
+import Icon from "./Icon";
+import { TagLink } from "./TagLink";
+
+interface IProps {
+  performers: Partial<GQL.PerformerDataFragment>[];
+}
+
+export const PerformerPopoverButton: React.FC<IProps> = ({ performers }) => {
+  const sorted = sortPerformers(performers);
+  const popoverContent = sorted.map((performer) => (
+    <div className="performer-tag-container row" key={performer.id}>
+      <Link
+        to={`/performers/${performer.id}`}
+        className="performer-tag col m-auto zoom-2"
+      >
+        <img
+          className="image-thumbnail"
+          alt={performer.name ?? ""}
+          src={performer.image_path ?? ""}
+        />
+      </Link>
+      <TagLink key={performer.id} performer={performer} className="d-block" />
+    </div>
+  ));
+
+  return (
+    <HoverPopover placement="bottom" content={popoverContent}>
+      <Button className="minimal">
+        <Icon icon="user" />
+        <span>{performers.length}</span>
+      </Button>
+    </HoverPopover>
+  );
+};