52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { useEffect } from "react";
|
|
import { Link, useLoaderData } from "@remix-run/react";
|
|
import { json, type MetaFunction } from "@remix-run/node";
|
|
|
|
export const meta: MetaFunction = () => {
|
|
return [
|
|
{ title: "日记" },
|
|
{ name: "description", content: "奇趣保罗的日常笔记" },
|
|
];
|
|
};
|
|
|
|
export async function loader() {
|
|
const note = await fetch("https://paul.ren/api/note").then((res) => res.json()) as API.Response<API.Note.INoteData[]>;
|
|
|
|
return json(note);
|
|
}
|
|
|
|
export default function Note() {
|
|
const note = useLoaderData<typeof loader>();
|
|
|
|
useEffect(() => {
|
|
console.log(note);
|
|
}, []);
|
|
|
|
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">日记</h1>
|
|
</section>
|
|
{note.data.map((item) => {
|
|
const year = item.date.substring(0, 4);
|
|
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
className="p-5 bg-white rounded-xl mb-8 last:mb-0 border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200"
|
|
>
|
|
<h2 className="text-pink-400 text-2xl font-bold mb-4">{item.title}</h2>
|
|
<p className="mb-4">{item.except}</p>
|
|
<div className="flex items-end justify-between">
|
|
<p className="opacity-60">{item.date}</p>
|
|
<Link className="py-2 px-4 bg-cyan-400 hover:bg-pink-400 transition-colors text-white rounded-xl" to={`/note/${year}/${item.id}`}>
|
|
继续阅读
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</main>
|
|
);
|
|
}
|