diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/ExplorePage.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/ExplorePage.tsx index d3e4ed47df..31165a4638 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/ExplorePage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/ExplorePage.tsx @@ -3,26 +3,44 @@ import Container from "components/common/Container"; import Tabs from "components/common/Tabs"; import PageHeader from "components/layout/PageHeader"; import React from "react"; +import { + faFire, + faLayerGroup, + faPhotoFilmMusic, +} from "@fortawesome/pro-solid-svg-icons"; +import FeaturedTab from "./tabs/FeaturedTab"; +import WeightsTab from "./tabs/WeightsTab"; +import MediaTab from "./tabs/MediaTab"; +import { Redirect, useLocation } from "react-router-dom"; interface ExplorePageProps {} export default function ExplorePage(props: ExplorePageProps) { + const { pathname } = useLocation(); + + if (pathname === `/explore` || pathname === `/explore/`) { + return ; + } + const tabs = [ { - label: "Home", - content:
Featured cards here
, - to: "/explore/home", + label: "Featured", + icon: faFire, + content: , + to: "/explore/featured", padding: true, }, { label: "Weights", - content:
Weights card list
, + icon: faLayerGroup, + content: , to: "/explore/weights", padding: true, }, { label: "Media", - content:
Media card list
, + icon: faPhotoFilmMusic, + content: , to: "/explore/media", padding: true, }, @@ -31,7 +49,8 @@ export default function ExplorePage(props: ExplorePageProps) { return ( - + + diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx new file mode 100644 index 0000000000..15fbfb88a2 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx @@ -0,0 +1,86 @@ +import React, { useRef, useState } from "react"; +import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; +import mockWeightsData from "./mockWeightsData"; +import AudioCard from "components/common/Card/AudioCard"; +import SkeletonCard from "components/common/Card/SkeletonCard"; +import { Link } from "react-router-dom"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faChevronRight } from "@fortawesome/pro-solid-svg-icons"; +import ImageCard from "components/common/Card/ImageCard"; + +export default function FeaturedTab() { + const gridContainerRef = useRef(null); + const [data] = useState(mockWeightsData); + const [isLoading] = useState(false); + + return ( +
+
+
+

+ Featured Voice Weights +

+ + View all + + +
+ + {isLoading ? ( +
+ {Array.from({ length: 6 }).map((_, index) => ( + + ))} +
+ ) : ( + console.log("Layout complete!")} + > + {data.map((data, index) => { + let card = ; + return ( +
+ {card} +
+ ); + })} + + )} +
+
+
+

+ Featured Image Weights +

+ + View all + + +
+ + {isLoading ? ( +
+ {Array.from({ length: 6 }).map((_, index) => ( + + ))} +
+ ) : ( + console.log("Layout complete!")} + > + {data.map((data, index) => { + let card = ; + return ( +
+ {card} +
+ ); + })} + + )} +
+
+ ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/HomeTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/HomeTab.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx new file mode 100644 index 0000000000..a995064220 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx @@ -0,0 +1,124 @@ +import React, { useRef, useState } from "react"; +import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; +import mockMediaData from "./mockMediaData"; +import AudioCard from "components/common/Card/AudioCard"; +import ImageCard from "components/common/Card/ImageCard"; +import VideoCard from "components/common/Card/VideoCard"; +import Select from "components/common/Select"; +import { + faArrowDownWideShort, + faFilter, +} from "@fortawesome/pro-solid-svg-icons"; +import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext"; +import SkeletonCard from "components/common/Card/SkeletonCard"; +import InfiniteScroll from "react-infinite-scroll-component"; + +export default function MediaTab() { + const gridContainerRef = useRef(null); + const [data, setData] = useState(mockMediaData); + const [isLoading] = useState(false); + const [hasMore, setHasMore] = useState(true); + + const fetchMoreData = () => { + // Simulate a delay (like fetching API) + setTimeout(() => { + const moreData = data.concat( + // Here, create more dummy data + mockMediaData.map(item => ({ ...item, id: item.token + data.length })) + ); + + setData(moreData); + + if (moreData.length >= mockMediaData.length * 2) { + setHasMore(false); + } + }, 1500); + }; + + const filterOptions = [ + { value: "all", label: "All Media" }, + { value: "images", label: "Images" }, + { value: "audio", label: "Audio" }, + { value: "video", label: "Video" }, + ]; + + const sortOptions = [ + { value: "newest", label: "Newest" }, + { value: "oldest", label: "Oldest" }, + { value: "mostliked", label: "Most Liked" }, + ]; + + return ( + <> +
+
+ +
+
+ + {isLoading ? ( +
+ {Array.from({ length: 6 }).map((_, index) => ( + + ))} +
+ ) : ( + +
+ Loading... +
+ + } + dataLength={data.length} + className="overflow-hidden" + > + console.log("Layout complete!")} + > + {data.map((data, index) => { + let card; + switch (data.media_type) { + case "audio": + card = ; + break; + case "image": + card = ; + break; + case "video": + card = ; + break; + default: + card =
Unsupported media type
; + } + return ( +
+ {card} +
+ ); + })} + + + )} + + + ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx new file mode 100644 index 0000000000..3b3b29df7b --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx @@ -0,0 +1,134 @@ +import React, { useRef, useState } from "react"; +import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; +import mockWeightsData from "./mockWeightsData"; +import AudioCard from "components/common/Card/AudioCard"; +import ImageCard from "components/common/Card/ImageCard"; +import VideoCard from "components/common/Card/VideoCard"; +import Select from "components/common/Select"; +import { + faArrowDownWideShort, + faFilter, +} from "@fortawesome/pro-solid-svg-icons"; +import SkeletonCard from "components/common/Card/SkeletonCard"; + +export default function WeightsTab() { + const gridContainerRef = useRef(null); + const [data] = useState(mockWeightsData); + const [isLoading] = useState(false); + const [selectedFilter, setSelectedFilter] = useState("all"); + + const filterOptions = [ + { value: "all", label: "All Weights" }, + { value: "tts", label: "Text to Speech" }, + { value: "vc", label: "Voice to Voice" }, + { value: "sd", label: "Image Generation" }, + ]; + + const sortOptions = [ + { value: "newest", label: "Newest" }, + { value: "oldest", label: "Oldest" }, + { value: "mostliked", label: "Most Bookmarked" }, + ]; + + const modelTtsOptions = [ + { value: "all", label: "All Types" }, + { value: "tt2", label: "Tacotron 2" }, + ]; + + const modelVcOptions = [ + { value: "all", label: "All Types" }, + { value: "rvc", label: "RVCv2" }, + { value: "svc", label: "SoVitsSvc" }, + ]; + + const modelSdOptions = [ + { value: "all", label: "All Types" }, + { value: "lora", label: "LoRA" }, + { value: "SD15", label: "SD 1.5" }, + { value: "SDXL", label: "SD XL" }, + ]; + + const handleFilterChange = (option: any) => { + const selectedOption = option as { value: string; label: string }; + setSelectedFilter(selectedOption.value); + }; + + return ( + <> +
+
+ + + {selectedFilter === "tts" && ( + + )} + {selectedFilter === "vc" && ( +