64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import type { Route } from "./+types/info";
|
|
import { treaty } from "@elysiajs/eden";
|
|
import type { App } from "@elysia/src";
|
|
import { useEffect, useState } from "react";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { TriangleAlert } from "lucide-react";
|
|
import { Title } from "@/components/Title";
|
|
import { Search } from "@/components/Search";
|
|
import { Error } from "@/components/Error";
|
|
import { Layout } from "@/components/Layout";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
const app = treaty<App>(import.meta.env.VITE_API_URL!);
|
|
|
|
type SongInfo = Awaited<ReturnType<ReturnType<typeof app.song>["info"]["get"]>>["data"];
|
|
type SongInfoError = Awaited<ReturnType<ReturnType<typeof app.song>["info"]["get"]>>["error"];
|
|
|
|
export async function clientLoader({ params }: Route.LoaderArgs) {
|
|
return { id: params.id };
|
|
}
|
|
|
|
export default function SongInfo({ loaderData }: Route.ComponentProps) {
|
|
const [data, setData] = useState<SongInfo | null>(null);
|
|
const [error, setError] = useState<SongInfoError | null>(null);
|
|
|
|
if (!data && !error) {
|
|
return (
|
|
<Layout>
|
|
<Title title="加载中" />
|
|
<Skeleton className="mt-6 w-full aspect-video rounded-lg" />
|
|
<div className="mt-6 flex justify-between items-baseline">
|
|
<Skeleton className="w-60 h-10 rounded-sm" />
|
|
<Skeleton className="w-25 h-10 rounded-sm" />
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
if (error?.status === 404) {
|
|
return (
|
|
<div className="w-screen min-h-screen flex items-center justify-center">
|
|
<Title title="未找到曲目" />
|
|
<div className="max-w-md w-full bg-gray-100 dark:bg-neutral-900 rounded-2xl shadow-lg p-6 flex flex-col gap-4 items-center text-center">
|
|
<div className="w-16 h-16 flex items-center justify-center rounded-full bg-red-500 text-white text-3xl">
|
|
<TriangleAlert size={34} className="-translate-y-0.5" />
|
|
</div>
|
|
<h1 className="text-3xl font-semibold text-neutral-900 dark:text-neutral-100">无法找到曲目</h1>
|
|
<a href={`/song/${loaderData.id}/add`} className="text-secondary-foreground">
|
|
点此收录
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return <Error error={error} />;
|
|
}
|
|
|
|
return <Layout></Layout>;
|
|
}
|