Initial frontend import
This commit is contained in:
TerryM
163
src/pages/Home.tsx
Normal file
163
src/pages/Home.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { getJSON, itemsOrEmpty, type Category, type Resource } from "../api";
|
||||
import { CategoryIcon } from "../components/CategoryIcon";
|
||||
import { FigmaBanner } from "../components/FigmaBanner";
|
||||
import {
|
||||
ComingSoonLatestUpdateRow,
|
||||
LatestUpdateRow,
|
||||
} from "../components/LatestUpdateRow";
|
||||
import {
|
||||
ComingSoonRecommendedCard,
|
||||
RecommendedCard,
|
||||
} from "../components/RecommendedCard";
|
||||
import { SectionHeader } from "../components/SectionHeader";
|
||||
import { useI18n } from "../i18n";
|
||||
import { categoryCardLines } from "../utils/categoryDisplay";
|
||||
|
||||
export function Home() {
|
||||
const { t, lang } = useI18n();
|
||||
const [cats, setCats] = useState<Category[]>([]);
|
||||
const [rec, setRec] = useState<Resource[]>([]);
|
||||
const [latest, setLatest] = useState<Resource[]>([]);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
const recRowRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const q = `?lang=${encodeURIComponent(lang)}`;
|
||||
Promise.all([
|
||||
getJSON<Category[]>(`/api/categories${q}`),
|
||||
getJSON<{ items: Resource[] }>(`/api/resources/recommended${q}&limit=12`),
|
||||
getJSON<{ items: Resource[] }>(`/api/resources/latest${q}&limit=8`),
|
||||
])
|
||||
.then(([c, r, l]) => {
|
||||
setCats(itemsOrEmpty(c));
|
||||
setRec(itemsOrEmpty(r.items));
|
||||
setLatest(itemsOrEmpty(l.items));
|
||||
})
|
||||
.catch((e) => setErr(String(e)));
|
||||
}, [lang]);
|
||||
|
||||
const iconKeyForResource = (r: Resource) =>
|
||||
cats.find((c) => c.id === r.categoryId)?.iconKey ?? "folder";
|
||||
|
||||
const scrollRec = (dir: 1 | -1) => {
|
||||
recRowRef.current?.scrollBy({ left: dir * 280, behavior: "smooth" });
|
||||
};
|
||||
|
||||
const recommendedPlaceholderCount = Math.max(0, 5 - rec.length);
|
||||
const latestPlaceholderCount = Math.max(0, 5 - latest.length);
|
||||
|
||||
if (err) {
|
||||
return (
|
||||
<div className="mt-6 rounded-xl border border-red-900 bg-red-950/40 p-4 text-red-200 md:mt-0">
|
||||
{err}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-12 pb-10 md:space-y-14 md:pb-16">
|
||||
<section className="-mt-6 md:mt-0">
|
||||
<FigmaBanner />
|
||||
</section>
|
||||
|
||||
<section id="categories" className="scroll-mt-24">
|
||||
<SectionHeader
|
||||
title={t("categorySection")}
|
||||
viewAllTo="/browse"
|
||||
viewAllLabel={t("viewAll")}
|
||||
/>
|
||||
<div className="mt-7 grid grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid-cols-5 md:gap-3 xl:grid-cols-7 xl:gap-4">
|
||||
{cats.map((c) => {
|
||||
const { line1, line2 } = categoryCardLines(c.name);
|
||||
return (
|
||||
<Link
|
||||
key={c.id}
|
||||
to={`/category/${c.slug}`}
|
||||
className="group flex min-h-[111px] min-w-0 flex-col items-center justify-center gap-3 rounded-xl border border-ark-line bg-ark-panel px-2.5 py-4 text-center transition hover:border-ark-gold/55 hover:shadow-[0_0_0_1px_rgba(238,183,38,0.12)] md:min-h-24 md:flex-row md:justify-start md:gap-4 md:px-5 md:text-left"
|
||||
>
|
||||
<CategoryIcon
|
||||
iconKey={c.iconKey}
|
||||
categorySlug={c.slug}
|
||||
className="h-9 w-9 shrink-0 text-ark-gold md:h-9 md:w-9"
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[15px] font-bold leading-snug text-white line-clamp-2 md:text-sm">
|
||||
{line1}
|
||||
</div>
|
||||
{line2 ? (
|
||||
<div className="mt-0.5 text-[15px] font-bold leading-snug text-white line-clamp-2 md:text-sm">
|
||||
{line2}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<SectionHeader
|
||||
title={t("officialSection")}
|
||||
viewAllTo="/browse?sort=recommended"
|
||||
viewAllLabel={t("viewAll")}
|
||||
/>
|
||||
<div className="relative mt-7">
|
||||
<div
|
||||
ref={recRowRef}
|
||||
className="flex gap-3 overflow-x-auto pb-5 pr-0 scroll-smooth snap-x snap-mandatory [-ms-overflow-style:none] [scrollbar-width:none] md:gap-4 [&::-webkit-scrollbar]:hidden"
|
||||
>
|
||||
{rec.map((r, index) => (
|
||||
<div key={r.id} className="snap-start">
|
||||
<RecommendedCard r={r} visualIndex={index} />
|
||||
</div>
|
||||
))}
|
||||
{Array.from({ length: recommendedPlaceholderCount }).map(
|
||||
(_, index) => (
|
||||
<div
|
||||
key={`recommended-coming-soon-${index}`}
|
||||
className="snap-start"
|
||||
>
|
||||
<ComingSoonRecommendedCard visualIndex={rec.length + index} />
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
<div className="h-1 rounded-full bg-black/80 md:hidden">
|
||||
<div className="h-full w-24 rounded-full bg-[#353740]" />
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => scrollRec(1)}
|
||||
className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
|
||||
aria-label={t("viewAll")}
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<SectionHeader
|
||||
title={t("latestSection")}
|
||||
viewAllTo="/browse?sort=latest"
|
||||
viewAllLabel={t("viewAll")}
|
||||
/>
|
||||
<div className="mt-7 grid gap-3 min-[576px]:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
|
||||
{latest.map((r) => (
|
||||
<LatestUpdateRow key={r.id} r={r} iconKey={iconKeyForResource(r)} />
|
||||
))}
|
||||
{Array.from({ length: latestPlaceholderCount }).map((_, index) => (
|
||||
<ComingSoonLatestUpdateRow
|
||||
key={`latest-coming-soon-${index}`}
|
||||
index={latest.length + index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user