UI V2

Squashed commits:
[e74bbf9] stuff
[28476de] stuff
[c7efb7b] stuff
[2c78f94] stuff
[f79338e] stuff
[a697876] stuff
[85bb60e] stuff
[9f108b2] stuff
[d8e00c0] stuff
[7787ef9] stuff
[f7f10b7] stuff
[aa266f7] stuff
[511ba6b] stuff
[7453747] stuff
[db55e2d] stuff
[b362623] stuff
[7288c17] stuff
[86638cd] stuff
[879dac4] stuff
[65a4996] stuff
[c6fb361] stuff
[d449ce7] stuff
[349dffa] stuff
[84206ab] stuff
[0253c65] stuff
[cc0992e] stuff
[3289e7d] stuff
[d9ab290] stuff
[dcc980d] stuff
[7787da8] stuff
[5bcf7cd] stuff
[00e9316] stuff
[54c9398] stuff
[72b6ee1] stuff
[4b4b26c] stuff
[4cbdb06] stuff
[1a240b3] stuff
[650ea08] stuff
[37440ef] stuff
[9ee66ba] stuff
[b430c86] stuff
[37159c3] stuff
[deba837] stuff
[6ac65f6] stuff
[a2ca1a1] stuff
[c010229] stuff
[3fd7306] stuff
[cbe6efc] stuff
[997a8d0] stuff
[d0708a2] stuff
[d316aba] stuff
[4fe9900] Added initial files

ui/v2/src/components/performers/PerformerCard.tsx

@@ -0,0 +1,50 @@
+import {
+  Card,
+  Elevation,
+  H4,
+} from "@blueprintjs/core";
+import React, { FunctionComponent } from "react";
+import { Link } from "react-router-dom";
+import * as GQL from "../../core/generated-graphql";
+import { TextUtils } from "../../utils/text";
+
+interface IPerformerCardProps {
+  performer: GQL.PerformerDataFragment;
+  ageFromDate?: string;
+}
+
+export const PerformerCard: FunctionComponent<IPerformerCardProps> = (props: IPerformerCardProps) => {
+  const age = TextUtils.age(props.performer.birthdate, props.ageFromDate);
+  const ageString = `${age} years old${!!props.ageFromDate ? " in this scene." : "."}`;
+
+  function maybeRenderFavoriteBanner() {
+    if (props.performer.favorite === false) { return; }
+    return (
+      <div className={`rating-banner rating-5`}>
+        FAVORITE
+      </div>
+    );
+  }
+
+  return (
+    <Card
+      className="grid-item"
+      elevation={Elevation.ONE}
+    >
+      <Link
+        to={`/performers/${props.performer.id}`}
+        className="performer previewable image"
+        style={{backgroundImage: `url(${props.performer.image_path})`}}
+      >
+        {maybeRenderFavoriteBanner()}
+      </Link>
+      <div className="card-section">
+        <H4 style={{textOverflow: "ellipsis", overflow: "hidden"}}>
+          {props.performer.name}
+        </H4>
+        {age !== 0 ? <span className="bp3-text-muted block">{ageString}</span> : undefined}
+        <span className="bp3-text-muted block">Stars in {props.performer.scene_count} scenes.</span>
+      </div>
+    </Card>
+  );
+};