Feat: Gallery List Page

相册页面，包括页尾组件
2023-11-11 22:44:52 +08:00
parent f64113a756
commit 073acf62d6
8 changed files with 146 additions and 0 deletions
@@ -0,0 +1,71 @@
+import { NavLink, useLoaderData } from "@remix-run/react";
+import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
+import { clsn, siteTitle } from "~/utils";
+
+import styles from "./styles.module.less";
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return [
+    { title: siteTitle(data?.currentCategory?.name || "相册") },
+    { name: "description", content: "奇趣保罗的日常笔记" },
+  ];
+};
+
+export async function loader({ request, params }: LoaderFunctionArgs) {
+  const url = new URL(request.url);
+  const page = url.searchParams.get("page") || "1";
+
+  const searchParams = new URLSearchParams();
+  searchParams.append("page", page);
+
+  const category = await fetch(`https://paul.ren/api/gallery`).then((res) => res.json()) as unknown as API.PageResponse<API.Gallery.ICateData[]>;
+  let cateIndex = -1;
+
+  if (params["*"]) {
+    cateIndex = category.data.findIndex((item) => item.slug === params["*"]);
+
+    if (cateIndex === -1) {
+      throw json("Not Found", { status: 404 });
+    }
+
+    searchParams.append("cate", String(category.data[cateIndex].id));
+  }
+
+  const media = await fetch(`https://paul.ren/api/media/?${searchParams.toString()}`).then((res) => res.json()) as unknown as API.PageResponse<API.Media.IMediaData[]>;
+  const currentCategory = cateIndex > -1 ? category.data[cateIndex]: undefined;
+
+  return json({ media, category, currentCategory });
+}
+
+export default function Gallery() {
+  const { media, category } = useLoaderData<typeof loader>();
+
+  return (
+    <main className="px-2 py-24 max-w-screen-2xl mx-auto">
+      <section className="mb-12">
+        <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-12">相册</h1>
+        <div className="flex overflow-auto whitespace-nowrap">
+          <NavLink to="/gallery" end className={({ isActive }) => clsn("inline-block px-3 py-1 ml-auto mr-3", isActive && "text-pink-400 font-bold")}>
+            所有
+          </NavLink>
+          {category.data.map((item) => (
+            <NavLink to={`/gallery/${item.slug}`} className={({ isActive }) => clsn("inline-block px-3 py-1 mr-3 last:mr-auto", isActive && "text-pink-400 font-bold")}>
+              {item.name}
+            </NavLink>
+          ))}
+        </div>
+      </section>
+      <section className="grid gap-8 grid-cols-2 sm:grid-cols-[repeat(auto-fill,minmax(18em,_1fr))]">
+        {media.data.map((item) => (
+          <div className="bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200">
+            <img className={styles.image} src={item.thumb_url} alt={item.title} />
+            <div className="relative p-4 sm:p-6 -mt-6 sm:-mt-12">
+              <span className="block text-sm mb-4 opacity-60">{item.take_time.substring(0, 10)}</span>
+              <h1 className="text-pink-400 text-xl sm:text-2xl font-bold text-ellipsis overflow-hidden">{item.title}</h1>
+            </div>
+          </div>
+        ))}
+      </section>
+    </main>
+  );
+}
@@ -0,0 +1,3 @@
+.image {
+  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 75%);
+}