terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enable category slug pages

Browse Source
This commit is contained in:
TerryM
2026-05-28 22:36:08 +08:00
parent f183a401fc
commit b24529afc4
6 changed files with 46 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/Home/index.tsx
View File

@@ -1,5 +1,5 @@
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useLocation } from "react-router-dom";
import { Link, useLocation } from "react-router-dom";
import { useEffect, useRef, useState } from "react";
import { getJSON, itemsOrEmpty, type Category } from "../../api";
import { CategoryIcon } from "../../components/CategoryIcon";
@@ -51,7 +51,6 @@ export function Home() {
const [latestPosts, setLatestPosts] = useState<Post[]>([]);
const [popular, setPopular] = useState<PostBackedResource[]>([]);
const [popularPosts, setPopularPosts] = useState<Post[]>([]);
const [categoryUnavailableOpen, setCategoryUnavailableOpen] = useState(false);
const [err, setErr] = useState<string | null>(null);
const recRowRef = useRef<HTMLDivElement>(null);
const latestRowRef = useRef<HTMLDivElement>(null);
@@ -253,10 +252,9 @@ export function Home() {
className="grid w-full shrink-0 snap-start grid-cols-3 gap-2 px-4"
>
{page.map((c) => (
<button
<Link
key={c.id}
type="button"
onClick={() => setCategoryUnavailableOpen(true)}
to={`/category/${encodeURIComponent(c.slug)}`}
className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
>
<CategoryIcon
@@ -267,7 +265,7 @@ export function Home() {
<div className="w-full truncate text-[13px] font-medium leading-[19.5px] text-white">
{cleanCategoryDisplayName(c.name)}
</div>
</button>
</Link>
))}
</div>
))}
@@ -306,10 +304,9 @@ export function Home() {
<div className="mt-7 hidden grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
{figmaOrderedCategories.map((c) => (
<button
<Link
key={c.id}
type="button"
onClick={() => setCategoryUnavailableOpen(true)}
to={`/category/${encodeURIComponent(c.slug)}`}
className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
>
<CategoryIcon
@@ -320,7 +317,7 @@ export function Home() {
<div className="w-full text-center text-[13px] font-medium leading-[19.5px] text-white line-clamp-2">
{cleanCategoryDisplayName(c.name)}
</div>
</button>
</Link>
))}
</div>
</section>
@@ -486,38 +483,6 @@ export function Home() {
</div>
</section>
) : null}
{categoryUnavailableOpen ? (
<div
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 px-6 backdrop-blur-sm"
role="dialog"
aria-modal="true"
aria-labelledby="category-unavailable-title"
onClick={() => setCategoryUnavailableOpen(false)}
>
<div
className="w-full max-w-[320px] rounded-2xl border border-[#27292E] bg-[#1D1E23] p-5 text-center shadow-2xl"
onClick={(event) => event.stopPropagation()}
>
<div
id="category-unavailable-title"
className="text-xl font-bold text-white"
>
{t("featureUnavailable")}
</div>
<p className="mt-2 text-sm leading-6 text-[#A8A9AE]">
{t("featureUnavailableDesc")}
</p>
<button
type="button"
onClick={() => setCategoryUnavailableOpen(false)}
className="mt-5 h-10 w-full rounded-full bg-ark-gold text-sm font-semibold text-black transition hover:bg-ark-gold2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#1D1E23]"
>
{t("confirm")}
</button>
</div>
</div>
) : null}
</div>
);
}