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 <m.article
whileHover={{ y: -4 }} whileHover={{ y: -4 }}
transition={CARD_HOVER_SPRING} transition={CARD_HOVER_SPRING}
className={`${CARD_BASE_CLASS} ${ className={`relative ${CARD_BASE_CLASS} ${
layout === "grid" ? CARD_GRID_SIZE_CLASS : CARD_CAROUSEL_SIZE_CLASS layout === "grid" ? CARD_GRID_SIZE_CLASS : CARD_CAROUSEL_SIZE_CLASS
} ${ } ${
useFigmaDesign useFigmaDesign
@@ -107,8 +107,10 @@ export function RecommendedCard({
> >
<Link <Link
to={`/resource/${r.id}`} 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 ? ( {cover ? (
<img <img
src={cover} src={cover}
@@ -125,7 +127,7 @@ export function RecommendedCard({
{r.badgeLabel} {r.badgeLabel}
</span> </span>
) : null} ) : null}
</Link> </div>
<div <div
className={ className={
useFigmaDesign useFigmaDesign
@@ -134,12 +136,9 @@ export function RecommendedCard({
} }
> >
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<Link <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">
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"
>
{displayTitle} {displayTitle}
</Link> </h3>
{useFigmaDesign ? ( {useFigmaDesign ? (
<div className="truncate text-[12px] font-normal leading-[17.376px] text-[#A8A9AE]"> <div className="truncate text-[12px] font-normal leading-[17.376px] text-[#A8A9AE]">
{displayCategoryName} {displayCategoryName}
@@ -173,8 +172,8 @@ export function RecommendedCard({
type="button" type="button"
className={ className={
useFigmaDesign 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" ? "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"
: "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 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")} title={isDownloading ? t("downloading") : t("download")}
aria-label={isDownloading ? t("downloading") : t("download")} aria-label={isDownloading ? t("downloading") : t("download")}