diff --git a/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx b/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx index 0a6e561d63..cdcd186b98 100644 --- a/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx +++ b/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx @@ -1,17 +1,21 @@ import React from "react"; +import Panel from "./Panel"; interface PageHeaderModelViewProps { titleIcon?: React.ReactNode; title: string; subText: React.ReactNode; tags?: string[]; + ratingBtn?: React.ReactNode; + ratingStats?: React.ReactNode; + extras?: React.ReactNode; } export default function PageHeaderModelView(props: PageHeaderModelViewProps) { return ( -
-
-
+
+ +

{props.titleIcon} @@ -19,16 +23,27 @@ export default function PageHeaderModelView(props: PageHeaderModelViewProps) {

{props.subText}

-
- {props.tags && - props.tags.map((tag, index) => ( -
- {tag} -
- ))} +
+
+ {props.tags && + props.tags.map((tag, index) => ( +
+ {tag} +
+ ))} +
-
+
+ +
+
+ {props.ratingBtn} + {props.extras} +
+ {props.ratingStats} +
+
); } diff --git a/packages/fakeyou.com/src/components/common/Panel.tsx b/packages/fakeyou.com/src/components/common/Panel.tsx index 8ae8d478ce..646548a284 100644 --- a/packages/fakeyou.com/src/components/common/Panel.tsx +++ b/packages/fakeyou.com/src/components/common/Panel.tsx @@ -12,7 +12,7 @@ export default function Panel(props: PanelProps) { return (
diff --git a/packages/fakeyou.com/src/components/common/ShareButton.tsx b/packages/fakeyou.com/src/components/common/ShareButton.tsx new file mode 100644 index 0000000000..cb9e0852d5 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/ShareButton.tsx @@ -0,0 +1,43 @@ +import React, { useState } from "react"; +import Tippy from "@tippyjs/react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faLink } from "@fortawesome/pro-solid-svg-icons"; + +interface ShareButtonProps { + url: string; +} + +export default function ShareButton(props: ShareButtonProps) { + const [tippyContent, setTippyContent] = useState("Share"); + + const copyToClipboard = async () => { + try { + await navigator.clipboard.writeText(props.url); + setTippyContent("Link Copied"); + setTimeout(() => { + setTippyContent("Share"); + }, 800); + } catch (error) { + console.error("Failed to copy link to clipboard:", error); + } + }; + + return ( +
+ + + +
+ ); +} diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 68c6224534..aa83fcc8bc 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -870,6 +870,7 @@ styles with important tags: font-size: 17px; background-color: lighten($secondary, 4%); border-radius: 0.5rem; + border-radius: 0.5rem; border: none; padding: 6px 20px; color: rgba($white, 0.5); @@ -877,10 +878,12 @@ styles with important tags: &.left { border-radius: 0.5rem 0px 0px 0.5rem; + border-radius: 0.5rem 0px 0px 0.5rem; } &.right { border-radius: 0px 0.5rem 0.5rem 0px; + border-radius: 0px 0.5rem 0.5rem 0px; } &.rated { diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx index bcb6bc2b1a..c385fbd8c8 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx @@ -23,6 +23,7 @@ import ShareButton from "components/common/ShareButton/ShareButton"; import PageContainer from "components/common/PageContainer/PageContainer"; interface VcModelViewPageProps { + sessionWrapper: SessionWrapper; sessionWrapper: SessionWrapper; sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; inferenceJobsByCategory: any; @@ -39,6 +40,7 @@ export default function VcModelViewPage(props: VcModelViewPageProps) {

V2V model by Vegito1089 + V2V model by Vegito1089

); @@ -81,8 +83,45 @@ export default function VcModelViewPage(props: VcModelViewPageProps) { const shareUrl = window.location.href; const shareButton = ; + let modelCreatorLink = Creator Name; + let modelTitle = title; + let modelUseCount = 10000; + let modelLanguage = "English"; + let modelType = "RVCv2"; + let modelUploadDate = "2021-09-10T06:15:04Z"; + let modelVisibility = ( +
+ + Public +
+ ); + + const voiceDetails = [ + { label: "Creator", value: modelCreatorLink }, + { label: "Title", value: modelTitle }, + { label: "Use count", value: modelUseCount }, + { label: "Spoken language", value: modelLanguage }, + { label: "Model type", value: modelType }, + { label: "Upload date (UTC)", value: modelUploadDate }, + { label: "Visibility", value: modelVisibility }, + ]; + + let ratingButtons = <>; + if (props.sessionWrapper.isLoggedIn()) { + ratingButtons = ( + + ); + } + + let ratingStats = ( + + ); + + const shareUrl = window.location.href; + const shareButton = ; + return ( - +