60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
||
import { Play, RefreshCw } from "lucide-react";
|
||
import { tracksApi } from "../lib/api";
|
||
import { useAuth } from "../store/auth";
|
||
import { usePlayer } from "../store/player";
|
||
import { TrackRow } from "../components/TrackRow";
|
||
|
||
export function Home() {
|
||
const { user } = useAuth();
|
||
const playQueue = usePlayer((s) => s.playQueue);
|
||
const { data, isLoading, isFetching, refetch } = useQuery({
|
||
queryKey: ["random-tracks"],
|
||
queryFn: () => tracksApi.random(25),
|
||
});
|
||
|
||
const items = data ?? [];
|
||
|
||
return (
|
||
<div className="mx-auto max-w-5xl animate-fade-in">
|
||
<div className="mb-6 flex flex-wrap items-end justify-between gap-3">
|
||
<div>
|
||
<h1 className="text-2xl font-bold tracking-tight text-white">
|
||
Привет{user?.displayName ? `, ${user.displayName}` : ""} 👋
|
||
</h1>
|
||
<p className="mt-1 text-sm text-zinc-500">
|
||
Случайные рекомендации из общей библиотеки. Персональные рекомендации появятся позже.
|
||
</p>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button className="btn-ghost" onClick={() => refetch()} disabled={isFetching}>
|
||
<RefreshCw size={15} className={isFetching ? "animate-spin" : ""} />
|
||
Обновить
|
||
</button>
|
||
<button
|
||
className="btn-primary"
|
||
onClick={() => items.length && playQueue(items, 0)}
|
||
disabled={!items.length}
|
||
>
|
||
<Play size={15} /> Играть всё
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{isLoading ? (
|
||
<p className="text-sm text-zinc-500">Загрузка рекомендаций...</p>
|
||
) : items.length === 0 ? (
|
||
<div className="card p-8 text-center text-sm text-zinc-500">
|
||
В библиотеке пока нет одобренных треков. Загрузите музыку на вкладке «Добавить».
|
||
</div>
|
||
) : (
|
||
<div className="card p-2">
|
||
{items.map((track, i) => (
|
||
<TrackRow key={track.id} track={track} list={items} index={i} />
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|