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