diff --git a/packages/fakeyou.com/src/components/common/SocialButton/SocialButton.tsx b/packages/fakeyou.com/src/components/common/SocialButton/SocialButton.tsx index 5c88f5dd7a..0c2fbf2506 100644 --- a/packages/fakeyou.com/src/components/common/SocialButton/SocialButton.tsx +++ b/packages/fakeyou.com/src/components/common/SocialButton/SocialButton.tsx @@ -4,21 +4,33 @@ import { faWhatsapp, faTwitter, } from "@fortawesome/free-brands-svg-icons"; -import { faXmark, faEnvelope } from "@fortawesome/pro-solid-svg-icons"; +import { + faArrowDownToLine, + faXmark, + faEnvelope, +} from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import React from "react"; import "./SocialButton.scss"; -export type Socials = "x" | "whatsapp" | "facebook" | "reddit" | "email"; +export type Socials = + | "x" + | "whatsapp" + | "facebook" + | "reddit" + | "email" + | "download"; interface SocialButtonProps { + downloadLink?: string; hideLabel?: boolean; social: Socials; - shareUrl: string; + shareUrl?: string; shareText: string; } export default function SocialButton({ + downloadLink, hideLabel, social, shareUrl, @@ -30,6 +42,7 @@ export default function SocialButton({ facebook: faFacebookF, reddit: faRedditAlien, email: faEnvelope, + download: faArrowDownToLine, }; let socialIcon = socialIcons[social] || faXmark; @@ -56,18 +69,22 @@ export default function SocialButton({ return `mailto:?subject=${encodeURIComponent( text )}&body=${encodeURIComponent(url)}`; + case "download": + return downloadLink; default: return "#"; } }; - const handleClick = () => { - const shareLink = getShareLink(social, shareUrl, shareText); - window.open(shareLink, "_blank"); - }; - return ( - + ); } diff --git a/packages/fakeyou.com/src/scss/colours.scss b/packages/fakeyou.com/src/scss/colours.scss index 0df4d7f042..dad71d2d0f 100644 --- a/packages/fakeyou.com/src/scss/colours.scss +++ b/packages/fakeyou.com/src/scss/colours.scss @@ -112,4 +112,8 @@ $badge-colors: ( &.bg-email { background-color: #858585; } + + &.bg-download { + background-color: map-get($badge-colors, "purple"); + } } diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PostlaunchLanding/ScrollingSceneCarousel.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PostlaunchLanding/ScrollingSceneCarousel.tsx index a0792f95c1..fb7b8debd7 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PostlaunchLanding/ScrollingSceneCarousel.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PostlaunchLanding/ScrollingSceneCarousel.tsx @@ -57,7 +57,10 @@ export default function ScrollingSceneCarousel({
{ editingTitleSet(EditingTitleState.saving); RenameMedia(urlToken, { @@ -119,8 +120,17 @@ export default function DevMediaPage({ "facebook", "reddit", "email", + "download", ]; + let downloadLink = bucketConfig.getGcsUrl(mediaFile?.public_bucket_path); + + const sharePath = `/media/${mediaFile?.token || ""}`; + + const shareUrl = GetWebsiteLink(sharePath); + + const shareText = "Check out this media on FakeYou.com!"; + return ( <>
( ))}