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

feat: add favorites to latest rows

Browse Source
This commit is contained in:
TerryM
2026-06-02 00:41:06 +08:00
parent de93e883c9
commit 4900256423
1 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/LatestUpdateRow.tsx
View File

@@ -5,9 +5,10 @@ import { useI18n } from "../i18n";
import { useLocalizedPath } from "../useLocalizedPath";
import { resourceTypeLabel } from "../resourceTypeLabels";
import { formatDateYmd } from "../utils/format";
import { FavoriteButton } from "../favorites/FavoriteButton";
const LATEST_CARD_CLASS =
"flex min-h-[106px] items-start gap-4 overflow-hidden rounded-xl border border-ark-line bg-ark-panel p-4 outline-none transition hover:border-ark-gold/45 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg md:min-h-[138px] md:p-5";
"relative flex min-h-[106px] items-start gap-4 overflow-hidden rounded-xl border border-ark-line bg-ark-panel p-4 outline-none transition hover:border-ark-gold/45 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg md:min-h-[138px] md:p-5";
export function LatestUpdateRow({
r,
@@ -21,15 +22,20 @@ export function LatestUpdateRow({
const dateStr = formatDateYmd(r.updatedAt);
return (
<Link to={lp(`/resource/${r.id}`)} className={LATEST_CARD_CLASS}>
<div className="flex shrink-0 items-center justify-center pt-0.5">
<article className={LATEST_CARD_CLASS}>
<Link
to={lp(`/resource/${r.id}`)}
aria-label={r.title}
className="absolute inset-0 z-0 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80"
/>
<div className="relative z-10 flex shrink-0 items-center justify-center pt-0.5">
<CategoryIcon
iconKey={iconKey}
categorySlug={r.categorySlug}
className="h-10 w-10 text-ark-gold"
/>
</div>
<div className="flex min-w-0 flex-1 self-stretch py-0.5 flex-col">
<div className="pointer-events-none relative z-10 flex min-w-0 flex-1 self-stretch py-0.5 flex-col pr-11">
<div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
{r.title}
</div>
@@ -43,7 +49,12 @@ export function LatestUpdateRow({
</span>
</div>
</div>
</Link>
<FavoriteButton
resourceId={r.id}
size="sm"
className="absolute right-3 top-3 z-20"
/>
</article>
);
}