improve gallery

This commit is contained in:
2025-11-01 17:28:24 +08:00
parent a4de7a1d54
commit 2499962815

View File

@@ -25,7 +25,8 @@ import Markdown from "react-markdown";
import "../markdown.css";
import Loading from "../components/loading.tsx";
import {
MdAdd, MdOutlineAccessTime,
MdAdd,
MdOutlineAccessTime,
MdOutlineAdd,
MdOutlineArchive,
MdOutlineArticle,
@@ -196,38 +197,64 @@ export default function ResourcePage() {
<div className="flex">
<div className="flex-1">
<h1 className={"text-2xl font-bold px-4 py-2"}>{resource.title}</h1>
{resource.alternativeTitles.map((e, i) => {
return (
<h2
key={i}
className={"text-lg px-4 py-1 text-gray-700 dark:text-gray-300"}
{resource.alternativeTitles.map((e, i) => {
return (
<h2
key={i}
className={
"text-lg px-4 py-1 text-gray-700 dark:text-gray-300"
}
>
{e}
</h2>
);
})}
<button
onClick={() => {
navigate(
`/user/${encodeURIComponent(resource.author.username)}`,
);
}}
className="border-b-2 mx-4 py-1 cursor-pointer border-transparent hover:border-primary transition-colors duration-200 ease-in-out"
>
{e}
</h2>
);
})}
<button
onClick={() => {
navigate(`/user/${encodeURIComponent(resource.author.username)}`);
}}
className="border-b-2 mx-4 py-1 cursor-pointer border-transparent hover:border-primary transition-colors duration-200 ease-in-out"
>
<div className="flex items-center ">
<div className="avatar">
<div className="w-6 rounded-full">
<img
src={network.getUserAvatar(resource.author)}
alt={"avatar"}
/>
<div className="flex items-center ">
<div className="avatar">
<div className="w-6 rounded-full">
<img
src={network.getUserAvatar(resource.author)}
alt={"avatar"}
/>
</div>
</div>
<div className="w-2"></div>
<div className="text-sm">{resource.author.username}</div>
</div>
</div>
<div className="w-2"></div>
<div className="text-sm">{resource.author.username}</div>
</div>
</button>
</button>
<Tags tags={resource.tags} />
<div className={"px-3 mt-2 flex flex-wrap"}>
{resource.links &&
resource.links.map((l) => {
return (
<a href={l.url} target={"_blank"}>
<span
className={
"py-1 px-3 inline-flex items-center m-1 border border-base-300 bg-base-100 opacity-90 rounded-2xl hover:bg-base-200 transition-colors cursor-pointer select-none"
}
>
{l.url.includes("steampowered.com") ? (
<BiLogoSteam size={20} />
) : (
<MdOutlineLink size={20} />
)}
<span className={"ml-2 text-sm"}>{l.label}</span>
</span>
</a>
);
})}
<CollectionDialog rid={resource.id} />
</div>
</div>
<div className="w-md p-4 hidden sm:flex items-center justify-center">
<div className="w-96 md:w-md lg:w-lg p-4 hidden sm:flex items-center justify-center">
<Gallery images={resource.gallery} />
</div>
</div>
@@ -236,29 +263,6 @@ export default function ResourcePage() {
<Gallery images={resource.gallery} />
</div>
<div className={"px-3 mt-2 flex flex-wrap"}>
{resource.links &&
resource.links.map((l) => {
return (
<a href={l.url} target={"_blank"}>
<span
className={
"py-1 px-3 inline-flex items-center m-1 border border-base-300 bg-base-100 opacity-90 rounded-2xl hover:bg-base-200 transition-colors cursor-pointer select-none"
}
>
{l.url.includes("steampowered.com") ? (
<BiLogoSteam size={20} />
) : (
<MdOutlineLink size={20} />
)}
<span className={"ml-2 text-sm"}>{l.label}</span>
</span>
</a>
);
})}
<CollectionDialog rid={resource.id} />
</div>
<div
className="tabs tabs-box my-4 mx-2 p-4 shadow"
style={{