diff --git a/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss
index f75c658315..8274c937bf 100644
--- a/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss
+++ b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss
@@ -4,7 +4,7 @@
font-weight: 500;
border-radius: 0.5rem;
font-size: 13px;
- padding: 9px 12px;
+ padding: 6px 12px;
background-color: $secondary;
color: $white;
cursor: pointer;
diff --git a/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx
index 6de7495d0a..6e07d0e74d 100644
--- a/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx
+++ b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx
@@ -3,13 +3,17 @@ import "./CheckableTag.scss";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faXmark } from "@fortawesome/pro-solid-svg-icons";
-interface Props {
+interface CheckableTagProps {
tag: string;
isSelected: boolean;
onToggle: (tag: string) => void;
}
-export default function CheckableTag({ tag, isSelected, onToggle }: Props) {
+export default function CheckableTag({
+ tag,
+ isSelected,
+ onToggle,
+}: CheckableTagProps) {
return (
void;
}
-export default function ModelSearch({ value, onChange }: Props) {
+export default function ModelSearch({ value, onChange }: ModelSearchProps) {
return (
- {data.map((item) => (
-
-
-
{item.name}
-
by {item.creator}
-
- {item.type}
-
+ {data.map((item) => {
+ return (
+
+
+
{item.name}
+
+ by{" "}
+
+ {item.creator}
+
+
+
+
+
+ {item.type}
+
+
+
+
+ {item.likes && shortenNumber(item.likes)}
+
+
+
+ {item.uses && shortenNumber(item.uses)}
+
+
+
+ {item.comments && shortenNumber(item.comments)}
+
+
+
+
+
+
+
+
-
- ))}
+ );
+ })}
);
}
diff --git a/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx b/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx
index b2b464bd65..474334e460 100644
--- a/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx
+++ b/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx
@@ -1,13 +1,17 @@
import React from "react";
import CheckableTag from "../CheckableTag";
-interface Props {
+interface ModelTagsProps {
tags: string[];
selectedTags: string[];
onSelectTag: (tag: string) => void;
}
-export default function ModelTags({ tags, selectedTags, onSelectTag }: Props) {
+export default function ModelTags({
+ tags,
+ selectedTags,
+ onSelectTag,
+}: ModelTagsProps) {
return (
{tags.map((tag) => (
diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
index 96ee68fd9d..62682ba82d 100644
--- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
+++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
@@ -41,13 +41,15 @@ export default function PageHeader({
{icon}
{title}
- {showButton && (
-
- )}
+
+ {showButton && (
+
+ )}
+
{subText}
diff --git a/packages/fakeyou.com/src/hooks/useShortenNumber/index.ts b/packages/fakeyou.com/src/hooks/useShortenNumber/index.ts
new file mode 100644
index 0000000000..393d617cc0
--- /dev/null
+++ b/packages/fakeyou.com/src/hooks/useShortenNumber/index.ts
@@ -0,0 +1 @@
+export { default } from "./useShortenNumber";
diff --git a/packages/fakeyou.com/src/hooks/useShortenNumber/useShortenNumber.tsx b/packages/fakeyou.com/src/hooks/useShortenNumber/useShortenNumber.tsx
new file mode 100644
index 0000000000..cc24407c9a
--- /dev/null
+++ b/packages/fakeyou.com/src/hooks/useShortenNumber/useShortenNumber.tsx
@@ -0,0 +1,6 @@
+export default function useShortenNumber(num: number): string {
+ if (Math.abs(num) < 1e3) return num.toString();
+ if (Math.abs(num) < 1e6) return (num / 1e3).toFixed(1) + "k";
+ if (Math.abs(num) < 1e9) return (num / 1e6).toFixed(1) + "M";
+ return num.toString();
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
index 874d2e5c0b..9989fd83be 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
@@ -2,12 +2,13 @@ import React from "react";
import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
import Container from "components/common/Container";
import PageHeader from "components/layout/PageHeader";
-import { faMessageDots } from "@fortawesome/pro-solid-svg-icons";
+import { faClock, faMessageDots } from "@fortawesome/pro-solid-svg-icons";
import ModelSearch from "components/common/ModelSearch";
import Panel from "components/common/Panel";
import useSearch from "hooks/useSearch/useSearch";
import ModelSearchResults from "components/common/ModelSearchResults";
import ModelTags from "components/common/ModelTags";
+import Select from "components/common/Select";
interface TtsModelSearchPageProps {
sessionWrapper: SessionWrapper;
@@ -19,18 +20,33 @@ const dummyData = [
name: "Spongebob",
tags: ["English", "High-pitched", "Character"],
type: "Tacotron2",
+ creator: "echelon",
+ likes: 14000,
+ uses: 1000000,
+ comments: 250,
+ time: new Date("2023-09-20T12:00:00Z").toISOString(),
},
{
id: 2,
name: "Mariano Closs",
tags: ["Spanish", "Low-pitched"],
type: "Tacotron2",
+ creator: "echelon",
+ likes: 308290,
+ uses: 30000000,
+ comments: 1200,
+ time: new Date("2023-10-12T12:00:00Z").toISOString(),
},
{
id: 3,
name: "Cristiano Ronaldo",
tags: ["Portuguese", "Low-pitched"],
type: "Tacotron2",
+ creator: "echelon",
+ likes: 17500,
+ uses: 40000000,
+ comments: 250,
+ time: new Date("2023-09-20T12:00:00Z").toISOString(),
},
];
@@ -72,12 +88,24 @@ export default function TtsModelSearchPage(props: TtsModelSearchPageProps) {
);
+ const sortOptions = [
+ { value: "most liked", label: "Most Liked" },
+ { value: "most used", label: "Most Used" },
+ { value: "moset recent", label: "Most Recent" },
+ ];
+ const sortTimeOptions = [
+ { value: "all time", label: "All Time" },
+ { value: "today", label: "Today" },
+ { value: "this week", label: "This Week" },
+ { value: "this month", label: "This Month" },
+ ];
+
return (