explore updates

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 <Redirect to={`/explore/featured`} />;
+  }
+
   const tabs = [
     {
-      label: "Home",
-      content: <div>Featured cards here</div>,
-      to: "/explore/home",
+      label: "Featured",
+      icon: faFire,
+      content: <FeaturedTab />,
+      to: "/explore/featured",
       padding: true,
     },
     {
       label: "Weights",
-      content: <div>Weights card list</div>,
+      icon: faLayerGroup,
+      content: <WeightsTab />,
       to: "/explore/weights",
       padding: true,
     },
     {
       label: "Media",
-      content: <div>Media card list</div>,
+      icon: faPhotoFilmMusic,
+      content: <MediaTab />,
       to: "/explore/media",
       padding: true,
     },
@@ -31,7 +49,8 @@ export default function ExplorePage(props: ExplorePageProps) {
   return (
     <Container type="panel">
       <PageHeader title="Explore" subText="View community created content" />
-      <Panel>
+
+      <Panel mb={true}>
         <Tabs tabs={tabs} />
       </Panel>
     </Container>

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<HTMLDivElement | null>(null);
+  const [data] = useState(mockWeightsData);
+  const [isLoading] = useState(false);
+
+  return (
+    <div className="d-flex flex-column gap-4">
+      <div>
+        <div className="d-flex align-items-center mb-3">
+          <h3 className="fw-semibold mb-0 flex-grow-1">
+            Featured Voice Weights
+          </h3>
+          <Link to="/explore/weights">
+            View all
+            <FontAwesomeIcon icon={faChevronRight} className="ms-2" />
+          </Link>
+        </div>
+
+        {isLoading ? (
+          <div className="row gx-3 gy-3">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <SkeletonCard key={index} />
+            ))}
+          </div>
+        ) : (
+          <MasonryGrid
+            gridRef={gridContainerRef}
+            onLayoutComplete={() => console.log("Layout complete!")}
+          >
+            {data.map((data, index) => {
+              let card = <AudioCard key={index} data={data} type="weights" />;
+              return (
+                <div key={index} className="col-12 col-sm-6 col-xl-4 grid-item">
+                  {card}
+                </div>
+              );
+            })}
+          </MasonryGrid>
+        )}
+      </div>
+      <div>
+        <div className="d-flex align-items-center mb-3">
+          <h3 className="fw-semibold mb-0 flex-grow-1">
+            Featured Image Weights
+          </h3>
+          <Link to="/explore/weights">
+            View all
+            <FontAwesomeIcon icon={faChevronRight} className="ms-2" />
+          </Link>
+        </div>
+
+        {isLoading ? (
+          <div className="row gx-3 gy-3">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <SkeletonCard key={index} />
+            ))}
+          </div>
+        ) : (
+          <MasonryGrid
+            gridRef={gridContainerRef}
+            onLayoutComplete={() => console.log("Layout complete!")}
+          >
+            {data.map((data, index) => {
+              let card = <ImageCard key={index} data={data} type="weights" />;
+              return (
+                <div key={index} className="col-12 col-sm-6 col-xl-4 grid-item">
+                  {card}
+                </div>
+              );
+            })}
+          </MasonryGrid>
+        )}
+      </div>
+    </div>
+  );
+}

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<HTMLDivElement | null>(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 (
+    <>
+      <div className="d-flex flex-wrap gap-3 mb-3">
+        <div className="d-flex gap-2 flex-grow-1">
+          <Select
+            icon={faArrowDownWideShort}
+            options={sortOptions}
+            defaultValue={sortOptions[0]}
+            isSearchable={false}
+          />
+          <Select
+            icon={faFilter}
+            options={filterOptions}
+            defaultValue={filterOptions[0]}
+            isSearchable={false}
+          />
+        </div>
+      </div>
+      <AudioPlayerProvider>
+        {isLoading ? (
+          <div className="row gx-3 gy-3">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <SkeletonCard key={index} />
+            ))}
+          </div>
+        ) : (
+          <InfiniteScroll
+            next={fetchMoreData}
+            hasMore={hasMore}
+            loader={
+              <div className="mt-4 d-flex justify-content-center">
+                <div className="spinner-border text-light" role="status">
+                  <span className="visually-hidden">Loading...</span>
+                </div>
+              </div>
+            }
+            dataLength={data.length}
+            className="overflow-hidden"
+          >
+            <MasonryGrid
+              gridRef={gridContainerRef}
+              onLayoutComplete={() => console.log("Layout complete!")}
+            >
+              {data.map((data, index) => {
+                let card;
+                switch (data.media_type) {
+                  case "audio":
+                    card = <AudioCard key={index} data={data} type="media" />;
+                    break;
+                  case "image":
+                    card = <ImageCard key={index} data={data} type="media" />;
+                    break;
+                  case "video":
+                    card = <VideoCard key={index} data={data} type="media" />;
+                    break;
+                  default:
+                    card = <div key={index}>Unsupported media type</div>;
+                }
+                return (
+                  <div
+                    key={index}
+                    className="col-12 col-sm-6 col-xl-4 grid-item"
+                  >
+                    {card}
+                  </div>
+                );
+              })}
+            </MasonryGrid>
+          </InfiniteScroll>
+        )}
+      </AudioPlayerProvider>
+    </>
+  );
+}

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<HTMLDivElement | null>(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 (
+    <>
+      <div className="d-flex flex-wrap gap-3 mb-3">
+        <div className="d-flex gap-2 flex-grow-1">
+          <Select
+            icon={faArrowDownWideShort}
+            options={sortOptions}
+            defaultValue={sortOptions[0]}
+            isSearchable={false}
+          />
+
+          <Select
+            icon={faFilter}
+            options={filterOptions}
+            defaultValue={filterOptions[0]}
+            isSearchable={false}
+            onChange={handleFilterChange}
+          />
+
+          {selectedFilter === "tts" && (
+            <Select
+              options={modelTtsOptions}
+              defaultValue={modelTtsOptions[0]}
+              isSearchable={false}
+            />
+          )}
+          {selectedFilter === "sd" && (
+            <Select
+              options={modelSdOptions}
+              defaultValue={modelSdOptions[0]}
+              isSearchable={false}
+            />
+          )}
+          {selectedFilter === "vc" && (
+            <Select
+              options={modelVcOptions}
+              defaultValue={modelVcOptions[0]}
+              isSearchable={false}
+            />
+          )}
+        </div>
+      </div>
+      {isLoading ? (
+        <div className="row gx-3 gy-3">
+          {Array.from({ length: 6 }).map((_, index) => (
+            <SkeletonCard key={index} />
+          ))}
+        </div>
+      ) : (
+        <MasonryGrid
+          gridRef={gridContainerRef}
+          onLayoutComplete={() => console.log("Layout complete!")}
+        >
+          {data.map((data, index) => {
+            let card;
+            switch (data.media_type) {
+              case "audio":
+                card = <AudioCard key={index} data={data} type="weights" />;
+                break;
+              case "image":
+                card = <ImageCard key={index} data={data} type="weights" />;
+                break;
+              case "video":
+                card = <VideoCard key={index} data={data} type="weights" />;
+                break;
+              default:
+                card = <div key={index}>Unsupported media type</div>;
+            }
+            return (
+              <div key={index} className="col-12 col-sm-6 col-xl-4 grid-item">
+                {card}
+              </div>
+            );
+          })}
+        </MasonryGrid>
+      )}
+    </>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/explore/tabs/mockMediaData.ts

@@ -0,0 +1,402 @@
+let mockMediaData = [
+  {
+    token: "token1",
+    weight_name: "Queen Elizabeth",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token2",
+    weight_name: "Monster House",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image.jpg",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token3",
+    weight_name: "Ronaldo",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token4",
+    weight_name: "Desert",
+    media_type: "video",
+    public_bucket_path: "/images/dummy-video.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token5",
+    weight_name: "3D Cat",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-2.jpg",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token6",
+    weight_name: "Superman",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token7",
+    weight_name: "Son Goku",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token8",
+    weight_name: "Astronaut in Space",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-3.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token9",
+    weight_name: "Monokuma",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token10",
+    weight_name: "Watery Landscape",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-4.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token11",
+    weight_name: "Queen Elizabeth",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token12",
+    weight_name: "Monster House",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image.jpg",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token13",
+    weight_name: "Ronaldo",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token14",
+    weight_name: "Desert",
+    media_type: "video",
+    public_bucket_path: "/images/dummy-video.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token15",
+    weight_name: "3D Cat",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-2.jpg",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token16",
+    weight_name: "Superman",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token17",
+    weight_name: "Son Goku",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token18",
+    weight_name: "Astronaut in Space",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-3.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token19",
+    weight_name: "Monokuma",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token20",
+    weight_name: "Watery Landscape",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-4.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token1",
+    weight_name: "Queen Elizabeth",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token2",
+    weight_name: "Monster House",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image.jpg",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token3",
+    weight_name: "Ronaldo",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token4",
+    weight_name: "Desert",
+    media_type: "video",
+    public_bucket_path: "/images/dummy-video.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token5",
+    weight_name: "3D Cat",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-2.jpg",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token6",
+    weight_name: "Superman",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token7",
+    weight_name: "Son Goku",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token8",
+    weight_name: "Astronaut in Space",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-3.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token9",
+    weight_name: "Monokuma",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token10",
+    weight_name: "Watery Landscape",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-4.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token11",
+    weight_name: "Queen Elizabeth",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token12",
+    weight_name: "Monster House",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image.jpg",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token13",
+    weight_name: "Ronaldo",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token14",
+    weight_name: "Desert",
+    media_type: "video",
+    public_bucket_path: "/images/dummy-video.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token15",
+    weight_name: "3D Cat",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-2.jpg",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token16",
+    weight_name: "Superman",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token17",
+    weight_name: "Son Goku",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token18",
+    weight_name: "Astronaut in Space",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-3.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token19",
+    weight_name: "Monokuma",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token20",
+    weight_name: "Watery Landscape",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-4.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token21",
+    weight_name: "Watery Landscape",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-4.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token22",
+    weight_name: "Watery Landscape",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-4.jpg",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+];
+
+export default mockMediaData;

packages/fakeyou.com/src/v2/view/pages/explore/tabs/mockWeightsData.ts

@@ -0,0 +1,66 @@
+let mockWeightsData = [
+  {
+    token: "token1",
+    weight_name: "Queen Elizabeth",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 150,
+    isLiked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token2",
+    weight_name: "Monster House",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image.jpg",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token3",
+    weight_name: "Ronaldo",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token5",
+    weight_name: "3D Cat",
+    media_type: "image",
+    public_bucket_path: "/images/dummy-image-2.jpg",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+  {
+    token: "token6",
+    weight_name: "Superman",
+    media_type: "audio",
+    public_bucket_path:
+      "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav",
+    likes: 200,
+    isLiked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
+  },
+];
+
+// Randomize the order of the array
+for (let i = mockWeightsData.length - 1; i > 0; i--) {
+  const j = Math.floor(Math.random() * (i + 1));
+  [mockWeightsData[i], mockWeightsData[j]] = [
+    mockWeightsData[j],
+    mockWeightsData[i],
+  ];
+}
+
+// Update the 'token' property to start at 1
+mockWeightsData.forEach((item, index) => {
+  item.token = `token${index + 1}`;
+});
+
+export default mockWeightsData;