Sort performers in popover and card views (#1294)

ui/v2.5/src/components/Images/ImageCard.tsx

@@ -11,6 +11,7 @@ import {
   TruncatedText,
 } from "src/components/Shared";
 import { TextUtils } from "src/utils";
+import { PerformerPopoverButton } from "../Shared/PerformerPopoverButton";
 
 interface IImageCardProps {
   image: GQL.SlimImageDataFragment;
@@ -58,30 +59,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
   function maybeRenderPerformerPopoverButton() {
     if (props.image.performers.length <= 0) return;
 
-    const popoverContent = props.image.performers.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>{props.image.performers.length}</span>
-        </Button>
-      </HoverPopover>
-    );
+    return <PerformerPopoverButton performers={props.image.performers} />;
   }
 
   function maybeRenderOCounter() {