added functionality for video card downloads, though disabled

src/website/packages/fakeyou.com/src/components/common/Badge/Badge.scss

@@ -6,7 +6,6 @@
   font-weight: 600;
   border-radius: 0.5rem;
   font-size: 13px;
-  padding: 4px 8px;
   transition: 0.2s;
   -moz-user-select: none;
   -khtml-user-select: none;
@@ -27,6 +26,15 @@
     padding: 2px 6px;
     border-radius: 0.3rem;
   }
+
+  &.icon-badge {
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+    svg {
+      color: #fff;
+    }
+  }
 }
 
 @each $color, $value in $badge-colors {

src/website/packages/fakeyou.com/src/components/common/Badge/Badge.tsx

@@ -4,30 +4,56 @@ import { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface BadgeProps {
-  label: string;
-  color?: string;
-  overlay?: boolean;
   className?: string;
-  small?: boolean;
+  color?: string;
+  label?: string;
   icon?: IconDefinition;
+  overlay?: boolean;
+  small?: boolean;
+  to?: string;
 }
 
 export default function Badge({
-  label,
-  color = "gray",
-  overlay = false,
   className = "",
-  small = false,
+  color = "gray",
   icon,
+  label,
+  overlay = false,
+  small = false,
+  to,
 }: BadgeProps) {
   const badgeClass = `fy-badge badge-${color} ${
     overlay ? "shadow" : ""
-  } mb-0 ${className} ${small ? "badge-small" : ""}`.trim();
+  } mb-0 ${className} ${small ? "badge-small" : ""} ${
+    label ? "" : "icon-badge"
+  }`.trim();
+
+  const ElementType = to ? "a" : "div";
 
   return (
-    <span className={badgeClass}>
-      {icon && <FontAwesomeIcon icon={icon} className="me-1" />}
-      {label}
-    </span>
+    <ElementType
+      {...{
+        ...(to
+          ? {
+              download: true,
+              href: to,
+              onClick: (e: any) => e.stopPropagation(),
+
+              target: "_blank",
+            }
+          : {}),
+      }}
+      className={badgeClass}
+    >
+      {icon && (
+        <FontAwesomeIcon
+          {...{
+            className: label ? "me-1" : "",
+            icon,
+          }}
+        />
+      )}
+      {label && label}
+    </ElementType>
   );
 }

src/website/packages/fakeyou.com/src/components/common/Card/Card.scss

@@ -163,6 +163,10 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
+
+  .fy-card-download-badge {
+    margin: 0 0 0 auto;
+  }
 }
 
 .card-bottom-text {

src/website/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx

@@ -1,7 +1,10 @@
 import React, { useEffect, useState } from "react";
 import Card from "../Card";
 import useTimeAgo from "hooks/useTimeAgo";
-import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faArrowRight,
+  // faArrowDownToLine,
+} from "@fortawesome/pro-solid-svg-icons";
 import Badge from "components/common/Badge";
 import Button from "components/common/Button";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
@@ -71,6 +74,10 @@ export default function VideoCard({
     ? bucketConfig.getGcsUrl(publicBucketPath + "-thumb.jpg")
     : null;
 
+  // const bucketUrl = publicBucketPath
+  //   ? new BucketConfig().getGcsUrl(publicBucketPath)
+  //   : "";
+
   const checkGifExists = async (url: string) => {
     try {
       const response = await fetch(url, { method: "HEAD" });
@@ -183,6 +190,13 @@ export default function VideoCard({
               <div className="d-flex flex-grow-1 gap-2">
                 <Badge label="Video" color="purple" overlay={true} />
                 <Badge label={productCategory} color="gray" overlay={true} />
+                {/*      <Badge
+                  className="fy-card-download-badge"
+                  icon={faArrowDownToLine}
+                  color="primary"
+                  overlay={true}
+                  to={bucketUrl}
+                />*/}
               </div>
               {inSelectModal && (
                 <Button

src/website/packages/fakeyou.com/src/scss/colours.scss

@@ -83,6 +83,7 @@ $badge-colors: (
   "ultramarine": #535fe8,
   "purple": #8f49de,
   "pink": #cc1d92,
+  "primary": $primary,
 );
 
 @mixin social-colors {