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

feat: refine home section navigation

Browse Source
This commit is contained in:
TerryM
2026-05-28 16:07:08 +08:00
parent 9d977be2d2
commit e0240f6217
4 changed files with 33 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import { ChevronRight } from "lucide-react";
import { Link, useLocation } from "react-router-dom";
import { useLocation } from "react-router-dom";
import { useEffect, useRef, useState } from "react";
import { getJSON, itemsOrEmpty, type Category } from "../../api";
import { CategoryIcon } from "../../components/CategoryIcon";
@@ -170,18 +170,23 @@ export function Home() {
const id = hash.slice(1);
if (!id) return;
const frame = window.requestAnimationFrame(() => {
document.getElementById(id)?.scrollIntoView({ block: "start" });
document.getElementById(id)?.scrollIntoView({
block: id === "latest" ? "center" : "start",
});
});
return () => window.cancelAnimationFrame(frame);
}, [hash, cats.length, rec.length, latest.length, popular.length]);
const latestPlaceholderCount = Math.max(0, 5 - latest.length);
const popularPlaceholderCount = Math.max(0, 5 - popular.length);
const recommendedDotCount = Math.max(1, Math.min(4, rec.length || 4));
const activeRecommendedDot = Math.min(
recommendedDotCount - 1,
Math.round(recScroll.progress * (recommendedDotCount - 1)),
);
const recommendedDotCount = rec.length;
const activeRecommendedDot =
recommendedDotCount > 0
? Math.min(
recommendedDotCount - 1,
Math.round(recScroll.progress * (recommendedDotCount - 1)),
)
: 0;
if (err) {
return (
@@ -197,7 +202,7 @@ export function Home() {
<FigmaBanner />
</section>
<section id="categories" className="scroll-mt-24">
<section id="categories" className="scroll-mt-16 md:scroll-mt-24">
<div className="px-4 md:px-0">
<SectionHeader
title={t("categorySection")}
@@ -219,10 +224,9 @@ export function Home() {
className="grid w-full shrink-0 snap-start grid-cols-3 gap-2 px-4"
>
{page.map((c) => (
<Link
<div
key={c.id}
to={`/category/${c.slug}`}
className="group 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 transition hover:bg-[#252630] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
className="flex h-[88px] min-w-0 cursor-default flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center"
>
<CategoryIcon
iconKey={c.iconKey}
@@ -232,7 +236,7 @@ export function Home() {
<div className="w-full truncate text-[13px] font-medium leading-[19.5px] text-white">
{cleanCategoryDisplayName(c.name)}
</div>
</Link>
</div>
))}
</div>
))}
@@ -271,10 +275,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) => (
<Link
<div
key={c.id}
to={`/category/${c.slug}`}
className="group 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 transition hover:border-ark-gold/55 hover:bg-[#252630] hover:shadow-[0_0_0_1px_rgba(238,183,38,0.12)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
className="flex h-[88px] min-w-0 cursor-default flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center"
>
<CategoryIcon
iconKey={c.iconKey}
@@ -284,12 +287,12 @@ 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>
</Link>
</div>
))}
</div>
</section>
<section id="official" className="scroll-mt-24">
<section id="official" className="scroll-mt-16 md:scroll-mt-24">
<div className="px-4 md:px-0">
<SectionHeader
title={t("officialSection")}
@@ -300,10 +303,10 @@ export function Home() {
<div className="relative">
<div
ref={recRowRef}
className="flex snap-x snap-mandatory gap-3 overflow-x-auto overflow-y-hidden px-4 pb-0 pr-4 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] md:mt-7 md:gap-4 md:px-0 md:pb-5 [&::-webkit-scrollbar]:hidden"
className="flex gap-3 overflow-x-auto overflow-y-hidden px-4 pb-0 pr-4 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] md:mt-7 md:gap-4 md:px-0 md:pr-0 md:pb-5 [&::-webkit-scrollbar]:hidden"
>
{rec.map((r, index) => (
<div key={r.id} className="snap-start">
<div key={r.id}>
<RecommendedCard r={r} visualIndex={index} useFigmaDesign />
</div>
))}
@@ -354,7 +357,7 @@ export function Home() {
</div>
</section>
<section id="latest" className="scroll-mt-24">
<section id="latest" className="scroll-mt-16 md:scroll-mt-24">
<div className="px-4 md:px-0">
<SectionHeader
title={t("latestSection")}
@@ -380,7 +383,7 @@ export function Home() {
</div>
</section>
<section id="popular" className="scroll-mt-24">
<section id="popular" className="scroll-mt-16 md:scroll-mt-24">
<div className="px-4 md:px-0">
<SectionHeader
title={t("popularSection")}