initial entity cards

packages/fakeyou.com/src/components/entities/AudioCard/AudioCard.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+// import { CardWrapper } from "components/entities";
+
+interface Props {
+  value?: any;
+}
+
+export default function AudioCard({ value }: Props) {
+  return {};
+};

packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import useTimeAgo from "hooks/useTimeAgo";
+import { faPersonWalking } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
+import CreatorName from "components/common/Card/CreatorName";
+import Badge from "components/common/Badge";
+
+interface Props {
+  data: any,
+  showCreator?: boolean
+}
+
+
+export default function BvhCard({ data, showCreator }: Props) {
+  const timeAgo = useTimeAgo(data.created_at);
+  const handleInnerClick = (event: any) => event.stopPropagation();
+  return <>
+    <Icon {...{ className: "card-mocap", icon: faPersonWalking }}/>
+    <div className="card-img-overlay">
+      <div className="card-img-gradient" />
+
+      <div className="d-flex align-items-center">
+        <div className="d-flex flex-grow-1">
+          <Badge label="Mocap" color="pink" overlay={true} />
+        </div>
+      </div>
+
+      <div className="card-img-overlay-text">
+        <div>
+          <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
+        </div>
+
+        <hr className="my-2" />
+
+        <div
+          className="d-flex align-items-center gap-2"
+          onClick={handleInnerClick}
+        >
+          {showCreator && (
+            <div className="flex-grow-1">
+              <CreatorName
+                displayName={
+                  data.maybe_creator?.display_name || "Anonymous"
+                }
+                gravatarHash={data.maybe_creator?.gravatar_hash || null}
+                avatarIndex={
+                  data.maybe_creator?.default_avatar.image_index || 0
+                }
+                backgroundIndex={
+                  data.maybe_creator?.default_avatar.color_index || 0
+                }
+                username={data.maybe_creator?.username || "anonymous"}
+              />
+            </div>
+          )}
+          {
+            // <div>
+            //   <LikeButton
+            //     {...{
+            //       ...ratings.makeProps({
+            //         entityToken: data.token,
+            //         entityType: "media_file",
+            //       }),
+            //     }}
+            //   />
+            // </div>
+          }
+        </div>
+      </div>
+    </div>
+  </>;
+};

packages/fakeyou.com/src/components/entities/BvhCard/index.tsx

@@ -0,0 +1 @@
+export { default } from "./BvhCard";

packages/fakeyou.com/src/components/entities/CardWrapper/CardWrapper.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import getCardUrl from "components/common/Card/getCardUrl";
+
+interface Props {
+  card: any,
+  data: any,
+  onClick?: (e:any) => any,
+  source?: string,
+  type: "media" | "weights"
+}
+
+export default function CardWrapper({ card: Card, data, onClick, source = "", type, ...rest }: Props) {
+  const linkUrl = getCardUrl(data,source,type);
+  const cardProps = { data, source, type, ...rest }
+  return onClick ? <Card {...{ onClick, ...cardProps }}/> : <Link {...{ to: linkUrl }}>
+      <Card {...cardProps}/> 
+    </Link>;
+};

packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx

@@ -1,13 +1,40 @@
 import React, { useRef } from "react";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
-import MediaCards from "components/common/Card/MediaCards";
+// import MediaCards from "components/common/Card/MediaCards";
+import AudioCard from "components/common/Card/AudioCard";
+import ImageCard from "components/common/Card/ImageCard";
+import MocapCard from "components/common/Card/MocapCard";
+import VideoCard from "components/common/Card/VideoCard";
+import { BvhCard } from "components/entities";
+
+interface MediaCardsProps {
+  props: any,
+  type: string
+}
 
 interface Props {
   list: MediaFile[],
   success?: boolean
 }
 
+const MediaCards = ({ props, type }: MediaCardsProps) => {
+  switch (type) {
+    case "audio":
+      return <AudioCard {...props} />;
+    case "image":
+      return <ImageCard {...props} />;
+    case "mocap":
+      return <MocapCard {...props} />;
+    case "video":
+      return <VideoCard {...props} />;
+    case "bvh":
+      return <BvhCard {...props}/>
+    default:
+      return <div>Unsupported media type</div>;
+  }
+};
+
 export default function MediaList({ list, success, ...rest }: Props) {
   const gridRef = useRef<HTMLDivElement | null>(null);
 

packages/fakeyou.com/src/components/entities/index.tsx

@@ -1,3 +1,4 @@
+import BvhCard from "./BvhCard";
 import MediaList from "./MediaList";
 
-export { MediaList };
+export { BvhCard, MediaList };