114 lines
4.4 KiB
TypeScript
114 lines
4.4 KiB
TypeScript
import { NavLink, useNavigate } from "react-router";
|
|
|
|
import LightBox, { useLightBox } from "~/components/biz/gallery/image-box";
|
|
import { StarFill } from "~/components/ui/icons";
|
|
import Pagination from "~/components/ui/pagination";
|
|
import { clsn, siteTitle } from "~/utils";
|
|
import { getImageThumbUrl } from "~/utils/media";
|
|
|
|
import type { Route } from "./+types/gallery";
|
|
import styles from "./gallery.module.css";
|
|
|
|
export function meta({ loaderData }: Route.MetaArgs) {
|
|
return [
|
|
{ title: siteTitle(loaderData?.currentCategory?.name || "相册") },
|
|
{
|
|
name: "description",
|
|
content:
|
|
loaderData?.currentCategory?.description ||
|
|
"奇趣保罗的照片与收藏",
|
|
},
|
|
];
|
|
}
|
|
|
|
export async function loader({ request, params }: Route.LoaderArgs) {
|
|
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 new Response("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 { media, category, currentCategory, page };
|
|
}
|
|
|
|
export default function Gallery({ loaderData }: Route.ComponentProps) {
|
|
const navigate = useNavigate();
|
|
const { media, category, page } = loaderData;
|
|
|
|
// const lightBoxInst = useRef();
|
|
const { ref: lightBoxInst, open } = useLightBox();
|
|
|
|
const onChangePage = (value: number) => {
|
|
navigate({
|
|
search: `?page=${value}`,
|
|
});
|
|
};
|
|
|
|
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 key={item.slug} 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-4 lg:gap-8 grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-12">
|
|
{media.data.map((item, index) => (
|
|
<div
|
|
key={item.id}
|
|
role="button"
|
|
tabIndex={0}
|
|
onKeyDown={() => {}}
|
|
className="relative bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200 group cursor-pointer"
|
|
onClick={() => open(index)}
|
|
>
|
|
<img className={styles.image} src={getImageThumbUrl(item.url)} alt={item.title} loading="lazy" />
|
|
{item.content && (
|
|
<div className={clsn("absolute top-0 left-0 right-0 bottom-0 bg-black/60 p-4 sm:p-6 text-white leading-7 transition-opacity duration-300 whitespace-pre-wrap opacity-0 group-hover:opacity-100", styles.desc)}>
|
|
{item.content}
|
|
</div>
|
|
)}
|
|
<div className="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}
|
|
{item.starred && (
|
|
<StarFill className=" text-yellow-400 w-6 h-6 inline-block ml-2 align-[-.1em]" />
|
|
)}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
<section className="text-center">
|
|
<Pagination current={Number(page)} size={20} total={media.count} onClick={onChangePage} />
|
|
</section>
|
|
|
|
<LightBox ref={lightBoxInst} list={media.data} />
|
|
</main>
|
|
);
|
|
}
|