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