| 1 | "use client"; |
| 2 | |
| 3 | import { SkeletonCard } from "@/components/ui/skeleton-card"; |
| 4 | import { SongProviderCard, SongProviderPath } from "@/components/ui/song-provider-card"; |
| 5 | import { useLogger } from "@/lib/logger"; |
| 6 | import { TAURI_CONTENT_TOP_VOTED } from "@/lib/tauri-handler"; |
| 7 | import { ContentCarouselResponse } from "@/models/content"; |
| 8 | import { SongProvider } from "@/models/song-response"; |
| 9 | import { invoke } from "@tauri-apps/api/tauri"; |
| 10 | import { useState, useEffect } from "react"; |
| 11 | |
| 12 | export function Index() { |
| 13 | |
| 14 | const log = useLogger("Top votes"); |
| 15 | const [songProviders, setSongProviders] = useState<SongProvider[]>([]); |
| 16 | |
| 17 | useEffect(() => { |
| 18 | log.debug("Top votes page loaded"); |
| 19 | async function fetchData() { |
| 20 | try { |
| 21 | const response = await invoke<ContentCarouselResponse>(TAURI_CONTENT_TOP_VOTED); |
| 22 | log.debug("Data", response); |
| 23 | setSongProviders(response.audio_files); |
| 24 | } catch (error) { |
| 25 | log.error("Failed to fetch data", error); |
| 26 | } |
| 27 | } |
| 28 | fetchData(); |
| 29 | // eslint-disable-next-line react-hooks/exhaustive-deps |
| 30 | }, []); |
| 31 | |
| 32 | return ( |
| 33 | <div> |
| 34 | <div className="prose prose-sm prose-invert max-w-none"> |
| 35 | <div className="grid grid-cols-3 gap-6"> |
| 36 | { songProviders.length === 0 && Array.from({ length: 6 }).map((_, i) => ( |
| 37 | <SkeletonCard key={i} isLoading={true} /> |
| 38 | ))} |
| 39 | { songProviders.length > 0 && songProviders.map((SongProvider, i) => ( |
| 40 | <SongProviderCard key={i} songProvider={SongProvider} path={SongProviderPath.SPLIT} /> |
| 41 | ))} |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
| 45 | ); |
| 46 | } |