62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
|
import
|
|
{
|
|
getPlatformApiPlatformsIdGetOptions,
|
|
getRomsApiRomsGetOptions,
|
|
} from "../../../clients/romm/@tanstack/react-query.gen";
|
|
import { useEventListener, useSessionStorage } from "usehooks-ts";
|
|
import { CollectionsDetail } from "../../components/CollectionsDetail";
|
|
import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
|
|
import { DefaultRommStaleTime, RPC_PORT, RPC_URL } from "../../../shared/constants";
|
|
import { Suspense } from "react";
|
|
|
|
export const Route = createFileRoute("/platform/$id")({
|
|
component: RouteComponent
|
|
});
|
|
|
|
function PlatformSlug ()
|
|
{
|
|
const { id } = Route.useParams();
|
|
const { data: platform } = useSuspenseQuery({ ...getPlatformApiPlatformsIdGetOptions({ path: { id: Number(id) } }), staleTime: DefaultRommStaleTime });
|
|
|
|
return <div className="flex gap-2 pr-4 pl-2 text-2xl font-semibold text-base-content items-center justify-center drop-shadow drop-shadow-base-300/10 ">
|
|
<img className="size-10 rounded-full bg-base-100 p-2" src={`${RPC_URL(__HOST__)}/api/romm/assets/platforms/${platform.slug.toLocaleLowerCase()}.svg`} ></img>
|
|
{platform.display_name}
|
|
</div>;
|
|
}
|
|
|
|
function PlatformTitle ()
|
|
{
|
|
const { id } = Route.useParams();
|
|
const { data: platform } = useSuspenseQuery({ ...getPlatformApiPlatformsIdGetOptions({ path: { id: Number(id) } }), staleTime: DefaultRommStaleTime });
|
|
|
|
return <div className="flex flex-col gap-2 pl-2 text-2xl font-semibold text-base-content justify-center drop-shadow">
|
|
|
|
<div className="divider mb-6 mt-0">
|
|
<img className="size-14 rounded-full p-2" src={`${RPC_URL(__HOST__)}/api/romm/assets/platforms/${platform.slug.toLocaleLowerCase()}.svg`} ></img>
|
|
{platform.display_name}
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
function RouteComponent ()
|
|
{
|
|
const { id } = Route.useParams();
|
|
|
|
const [, setBackground] = useSessionStorage<string | undefined>(
|
|
"home-background",
|
|
undefined,
|
|
);
|
|
const navigate = useNavigate();
|
|
useEventListener("cancel", () => navigate({ to: "/", viewTransition: { types: ['zoom-out'] } }));
|
|
|
|
return (
|
|
<div className="w-full h-full">
|
|
<CollectionsDetail
|
|
title={<Suspense><PlatformTitle /></Suspense>}
|
|
setBackground={setBackground}
|
|
filters={{ platformIds: [Number(id)] }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|