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

feat: make entire recommended card clickable to jump to post bubble

Browse Source 
Wrap the card in a stretched link overlay so clicking anywhere (not
just the title) navigates to /resource/:id and scrolls to the matching
bubble. Keep the download button above the overlay so it stays
clickable.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-29 13:08:16 +08:00
parent f73131dc03
commit b252fa113d
1 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/RecommendedCard.tsx
View File

@@ -97,7 +97,7 @@ export function RecommendedCard({
<m.article
whileHover={{ y: -4 }}
transition={CARD_HOVER_SPRING}
className={`${CARD_BASE_CLASS} ${
className={`relative ${CARD_BASE_CLASS} ${
layout === "grid" ? CARD_GRID_SIZE_CLASS : CARD_CAROUSEL_SIZE_CLASS
} ${
useFigmaDesign
@@ -107,8 +107,10 @@ export function RecommendedCard({
>
<Link
to={`/resource/${r.id}`}
className="relative block aspect-[208/108] overflow-hidden bg-[#111116]"
>
aria-label={displayTitle}
className="absolute inset-0 z-10 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
/>
<div className="relative block aspect-[208/108] overflow-hidden bg-[#111116]">
{cover ? (
<img
src={cover}
@@ -125,7 +127,7 @@ export function RecommendedCard({
{r.badgeLabel}
</span>
) : null}
</Link>
</div>
<div
className={
useFigmaDesign
@@ -134,12 +136,9 @@ export function RecommendedCard({
}
>
<div className="flex flex-col gap-1.5">
<Link
to={`/resource/${r.id}`}
className="text-[15px] font-semibold leading-[21.72px] text-white line-clamp-2 hover:text-ark-gold2 md:text-base md:font-bold md:leading-snug"
>
<h3 className="text-[15px] font-semibold leading-[21.72px] text-white line-clamp-2 transition-colors group-hover:text-ark-gold2 md:text-base md:font-bold md:leading-snug">
{displayTitle}
</Link>
</h3>
{useFigmaDesign ? (
<div className="truncate text-[12px] font-normal leading-[17.376px] text-[#A8A9AE]">
{displayCategoryName}
@@ -173,8 +172,8 @@ export function RecommendedCard({
type="button"
className={
useFigmaDesign
? "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-ark-gold outline-none transition hover:bg-[#22232D] active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
: "shrink-0 rounded-lg p-1 text-ark-gold outline-none transition hover:bg-ark-gold/10 active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
? "relative z-20 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-ark-gold outline-none transition hover:bg-[#22232D] active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
: "relative z-20 shrink-0 rounded-lg p-1 text-ark-gold outline-none transition hover:bg-ark-gold/10 active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
}
title={isDownloading ? t("downloading") : t("download")}
aria-label={isDownloading ? t("downloading") : t("download")}