Paul-Home-Remix-Old/app/routes/note.$year.$id.tsx

34 lines
1.1 KiB
TypeScript

import { LoaderFunctionArgs, json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import Article from "~/components/common/article";
export async function loader({ params }: LoaderFunctionArgs) {
if (Number.isNaN(Number(params.year)) || Number.isNaN(Number(params.id))) {
throw json("Not Found", { status: 404 });
}
const note = await fetch(`https://paul.ren/api/note/get?id=${params.id}&year=${params.year}`).then((res) => res.json()) as API.Response<API.Note.INoteData>;
if (note.status === "Failed") {
throw json("Not Found", { status: 404 });
}
return json(note);
}
export default function Detail() {
const note = useLoaderData<typeof loader>();
return (
<main className="px-2 py-10 max-w-3xl mx-auto">
<section className="my-12">
<h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">{note.data.title}</h1>
<p className="text-center opacity-60">{note.data.date}</p>
</section>
<section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200">
<Article html={note.data.content_html} />
</section>
</main>
);
};