terry-wallet-login #15
@@ -66,7 +66,7 @@ function RankBadge({ index }: { index: number }) {
|
||||
if (index < MEDALS.length) {
|
||||
return (
|
||||
<span
|
||||
className="flex w-7 shrink-0 justify-center text-[22px] leading-none"
|
||||
className="flex w-7 shrink-0 justify-center text-[22px] leading-none md:w-[76px] md:text-[28px]"
|
||||
aria-label={`No.${index + 1}`}
|
||||
>
|
||||
{MEDALS[index]}
|
||||
@@ -75,7 +75,7 @@ function RankBadge({ index }: { index: number }) {
|
||||
}
|
||||
return (
|
||||
<span
|
||||
className="flex w-7 shrink-0 justify-center text-lg font-extrabold tabular-nums text-[#7d7e87]"
|
||||
className="flex w-7 shrink-0 justify-center text-lg font-extrabold tabular-nums text-[#7d7e87] md:w-[76px]"
|
||||
aria-label={`No.${index + 1}`}
|
||||
>
|
||||
{index + 1}
|
||||
@@ -123,7 +123,7 @@ function PopularRankRow({
|
||||
};
|
||||
|
||||
return (
|
||||
<article className="relative flex items-center gap-3 rounded-2xl border border-[#27292E] bg-[#272632] p-3 transition hover:border-ark-gold/55 md:gap-4 md:p-4">
|
||||
<article className="relative flex items-center gap-3 overflow-hidden rounded-2xl border border-[#27292E] bg-[#272632] p-3 transition hover:border-ark-gold/55 md:h-[90px] md:gap-0 md:p-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
@@ -138,8 +138,8 @@ function PopularRankRow({
|
||||
<RankBadge index={index} />
|
||||
|
||||
<div
|
||||
className={`relative z-10 flex h-[52px] w-[64px] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#111116] md:h-[58px] md:w-[72px] ${
|
||||
isTop3 ? "ring-1 ring-ark-gold/45" : ""
|
||||
className={`relative z-10 flex h-[52px] w-[64px] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#111116] md:h-[90px] md:w-[246px] md:rounded-none ${
|
||||
isTop3 ? "ring-1 ring-ark-gold/45 md:ring-0" : ""
|
||||
}`}
|
||||
>
|
||||
{cover ? (
|
||||
@@ -148,7 +148,7 @@ function PopularRankRow({
|
||||
alt=""
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="h-full w-full object-fill"
|
||||
className="h-full w-full object-cover"
|
||||
onError={() => setCoverFailed(true)}
|
||||
/>
|
||||
) : (
|
||||
@@ -156,12 +156,12 @@ function PopularRankRow({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pointer-events-none relative z-10 flex min-w-0 flex-1 flex-col gap-1">
|
||||
<div className="line-clamp-2 text-sm font-bold leading-snug text-white md:text-base">
|
||||
<div className="pointer-events-none relative z-10 flex min-w-0 flex-1 flex-col gap-1 md:gap-3 md:pl-6 md:pr-4">
|
||||
<div className="line-clamp-2 text-sm font-bold leading-snug text-white md:text-base md:font-semibold md:leading-[23px]">
|
||||
{r.title}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-[#9b9ca6]">
|
||||
<span className="rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3]">
|
||||
<div className="flex items-center gap-2 text-xs text-[#9b9ca6] md:gap-3 md:text-[#9FA0A8]">
|
||||
<span className="rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3] md:px-3 md:py-1">
|
||||
{resourceTypeLabel(t, r.type)}
|
||||
</span>
|
||||
<span className="truncate">
|
||||
@@ -174,7 +174,7 @@ function PopularRankRow({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex shrink-0 items-center gap-1">
|
||||
<div className="relative z-10 flex shrink-0 items-center gap-2 pr-4 md:pr-6">
|
||||
<FavoriteButton resourceId={r.id} />
|
||||
{r.isDownloadable ? (
|
||||
<button
|
||||
|
||||
@@ -107,7 +107,7 @@ export function RecommendedCard({
|
||||
layout === "grid" ? CARD_GRID_SIZE_CLASS : CARD_CAROUSEL_SIZE_CLASS
|
||||
} ${
|
||||
useFigmaDesign
|
||||
? "border-[#27292E]"
|
||||
? "border-[#27292E] bg-[#272632]"
|
||||
: "border-transparent md:border-ark-line md:bg-ark-panel"
|
||||
}`}
|
||||
>
|
||||
@@ -116,7 +116,13 @@ export function RecommendedCard({
|
||||
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]">
|
||||
<div
|
||||
className={
|
||||
useFigmaDesign
|
||||
? "relative block h-[131px] overflow-hidden bg-[#272632]"
|
||||
: "relative block aspect-[208/108] overflow-hidden bg-[#111116]"
|
||||
}
|
||||
>
|
||||
{cover ? (
|
||||
<img
|
||||
src={cover}
|
||||
@@ -134,21 +140,22 @@ export function RecommendedCard({
|
||||
{r.badgeLabel}
|
||||
</span>
|
||||
) : null}
|
||||
<FavoriteButton
|
||||
resourceId={r.id}
|
||||
size="sm"
|
||||
className="absolute right-3 top-3 z-20 shadow-lg shadow-black/30"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
useFigmaDesign
|
||||
? "flex h-[131px] flex-col px-4 py-3"
|
||||
? "flex h-[143px] flex-col px-4 py-4"
|
||||
: "flex min-h-[131px] flex-1 flex-col p-4 pt-3 md:min-h-[121px]"
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<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">
|
||||
<h3
|
||||
className={
|
||||
useFigmaDesign
|
||||
? "text-base font-semibold leading-[23px] text-white line-clamp-2 transition-colors group-hover:text-ark-gold2"
|
||||
: "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}
|
||||
</h3>
|
||||
{useFigmaDesign ? (
|
||||
@@ -179,36 +186,39 @@ export function RecommendedCard({
|
||||
)}
|
||||
<time dateTime={dateTime}>{dateStr}</time>
|
||||
</div>
|
||||
{dl ? (
|
||||
<button
|
||||
type="button"
|
||||
className={
|
||||
useFigmaDesign
|
||||
? "relative z-20 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white 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-white 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")}
|
||||
aria-busy={isDownloading}
|
||||
disabled={isDownloading}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void handleDownload();
|
||||
}}
|
||||
>
|
||||
{isDownloading ? (
|
||||
<LoaderCircle
|
||||
className="h-5 w-5 animate-spin"
|
||||
strokeWidth={2.2}
|
||||
/>
|
||||
) : useFigmaDesign ? (
|
||||
<DownloadCloudIcon className="h-6 w-6" />
|
||||
) : (
|
||||
<Download className="h-5 w-5" strokeWidth={2.2} />
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
<div className="relative z-20 flex shrink-0 items-center gap-2">
|
||||
<FavoriteButton resourceId={r.id} size="sm" />
|
||||
{dl ? (
|
||||
<button
|
||||
type="button"
|
||||
className={
|
||||
useFigmaDesign
|
||||
? "relative z-20 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white 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-white 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")}
|
||||
aria-busy={isDownloading}
|
||||
disabled={isDownloading}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void handleDownload();
|
||||
}}
|
||||
>
|
||||
{isDownloading ? (
|
||||
<LoaderCircle
|
||||
className="h-5 w-5 animate-spin"
|
||||
strokeWidth={2.2}
|
||||
/>
|
||||
) : useFigmaDesign ? (
|
||||
<DownloadCloudIcon className="h-6 w-6" />
|
||||
) : (
|
||||
<Download className="h-5 w-5" strokeWidth={2.2} />
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</m.article>
|
||||
|
||||
Reference in New Issue
Block a user