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

terry-staging #16

Merged
terry merged 96 commits from terry-staging into main 2026-06-05 16:33:12 +00:00
Conversation 0 Commits 96 Files Changed 76 +56 -50
1 changed files with 56 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit aae7faf9dd - Show all commits

106
src/components/PopularRankList.tsx
View File

@@ -66,7 +66,7 @@ function RankBadge({ index }: { index: number }) {
if (index < MEDALS.length) { if (index < MEDALS.length) {
return ( return (
<span <span
className="flex w-7 shrink-0 justify-center text-[22px] leading-none md:w-[76px] md:text-[28px]" className="mt-[15px] flex w-7 shrink-0 justify-center text-[22px] leading-none md:mt-0 md:w-[76px] md:text-[28px]"
aria-label={`No.${index + 1}`} aria-label={`No.${index + 1}`}
> >
{MEDALS[index]} {MEDALS[index]}
@@ -75,7 +75,7 @@ function RankBadge({ index }: { index: number }) {
} }
return ( return (
<span <span
className="flex w-7 shrink-0 justify-center text-lg font-extrabold tabular-nums text-[#7d7e87] md:w-[76px]" className="mt-[15px] flex w-7 shrink-0 justify-center text-lg font-extrabold tabular-nums text-[#7d7e87] md:mt-0 md:w-[76px]"
aria-label={`No.${index + 1}`} aria-label={`No.${index + 1}`}
> >
{index + 1} {index + 1}
@@ -130,10 +130,10 @@ export function PopularRankRow({
return ( return (
<article <article
className={`relative grid items-center gap-x-3 gap-y-2 overflow-hidden rounded-2xl bg-[#272632] p-3 transition hover:ring-1 hover:ring-ark-gold/55 md:flex md:h-[90px] md:gap-0 md:p-0 ${ className={`relative grid items-center gap-x-3 overflow-hidden rounded-2xl bg-[#272632] p-3 transition hover:ring-1 hover:ring-ark-gold/55 md:flex md:h-[90px] md:gap-0 md:p-0 ${
showRank showRank
? "grid-cols-[28px_64px_minmax(0,1fr)]" ? "grid-cols-[92px_minmax(0,1fr)_88px]"
: "grid-cols-[64px_minmax(0,1fr)]" : "grid-cols-[64px_minmax(0,1fr)_88px]"
}`} }`}
> >
<button <button
@@ -148,56 +148,62 @@ export function PopularRankRow({
className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70" className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
/> />
{showRank ? <RankBadge index={index} /> : null} <div className="relative z-10 flex items-start gap-2 md:contents">
{showRank ? <RankBadge index={index} /> : null}
<div <div className="flex w-[64px] shrink-0 flex-col items-center gap-1 md:block md:h-[90px] md:w-[246px]">
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 ${ <div
isTop3 ? "ring-1 ring-ark-gold/45 md:ring-0" : "" className={`flex h-[52px] w-[64px] items-center justify-center overflow-hidden rounded-lg bg-[#111116] md:h-full md:w-full md:rounded-none ${
}`} isTop3 ? "ring-1 ring-ark-gold/45 md:ring-0" : ""
> }`}
{cover ? ( >
<img {cover ? (
src={cover} <img
alt="" src={cover}
loading="lazy" alt=""
decoding="async" loading="lazy"
className="h-full w-full object-cover" decoding="async"
onError={() => setCoverFailed(true)} className="h-full w-full object-cover"
/> onError={() => setCoverFailed(true)}
) : ( />
<FallbackCover type={r.type} /> ) : (
)} <FallbackCover type={r.type} />
</div> )}
</div>
<div <time
className={`pointer-events-none relative z-10 row-start-1 flex min-w-0 flex-1 flex-col gap-1 md:gap-3 md:pl-6 md:pr-4 ${ dateTime={post.publishedAt}
showRank ? "col-start-3" : "col-start-2" className="whitespace-nowrap text-[10px] leading-4 text-ark-muted md:hidden"
}`} >
>
<div className="break-words text-sm font-bold leading-snug text-white md:line-clamp-2 md:text-base md:font-semibold md:leading-[23px]">
{r.title}
</div>
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[#9b9ca6] md:flex-nowrap md:gap-3 md:text-[#9FA0A8]">
<span className="shrink-0 rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3] md:px-3 md:py-1">
{resourceTypeLabel(t, r.type)}
</span>
<span className="min-w-0 break-words">
{cleanCategoryDisplayName(r.categoryName)}
</span>
<span className="text-[#55565e]">·</span>
<time dateTime={post.publishedAt} className="shrink-0 text-ark-muted">
{formatDateYmd(post.publishedAt)} {formatDateYmd(post.publishedAt)}
</time> </time>
</div> </div>
</div> </div>
<div <div className="pointer-events-none relative z-10 col-start-2 flex min-w-0 flex-1 flex-col gap-1 md:col-auto md:gap-3 md:pl-6 md:pr-4">
className={`relative z-10 row-start-2 ml-auto flex shrink-0 items-center gap-2 md:ml-0 md:pr-6 ${ <div className="line-clamp-2 text-sm font-bold leading-snug text-white md:text-base md:font-semibold md:leading-[23px]">
showRank ? "col-start-3" : "col-start-2" {r.title}
}`} </div>
> <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">
{cleanCategoryDisplayName(r.categoryName)}
</span>
<span className="hidden text-[#55565e] md:inline">·</span>
<time
dateTime={post.publishedAt}
className="hidden shrink-0 text-ark-muted md:inline"
>
{formatDateYmd(post.publishedAt)}
</time>
</div>
</div>
<div className="relative z-10 col-start-3 flex shrink-0 items-center justify-end gap-2 md:col-auto md:pr-6">
<FavoriteButton <FavoriteButton
resourceId={r.id} resourceId={r.id}
size="sm"
onFavoriteChange={(favorited) => onFavoriteChange={(favorited) =>
onFavoriteChange?.(post.id, favorited) onFavoriteChange?.(post.id, favorited)
} }
@@ -209,15 +215,15 @@ export function PopularRankRow({
disabled={isDownloading} disabled={isDownloading}
aria-label={t("download")} aria-label={t("download")}
title={t("download")} title={t("download")}
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:cursor-wait" className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:cursor-wait"
> >
{isDownloading ? ( {isDownloading ? (
<LoaderCircle <LoaderCircle
className="h-5 w-5 animate-spin" className="h-4 w-4 animate-spin"
strokeWidth={2.3} strokeWidth={2.3}
/> />
) : ( ) : (
<DownloadCloudIcon className="h-6 w-6" /> <DownloadCloudIcon className="h-5 w-5" />
)} )}
</button> </button>
) : null} ) : null}