-
+
+
+
{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 (
-
+