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

terry-wallet-login #15

Merged
terry merged 95 commits from terry-wallet-login into terry-staging 2026-06-05 16:32:43 +00:00
Conversation 0 Commits 95 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

66
src/components/PopularRankList.tsx
View File

@@ -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 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}`}
>
{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] 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}`}
>
{index + 1}
@@ -130,10 +130,10 @@ export function PopularRankRow({
return (
<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
? "grid-cols-[28px_64px_minmax(0,1fr)]"
: "grid-cols-[64px_minmax(0,1fr)]"
? "grid-cols-[92px_minmax(0,1fr)_88px]"
: "grid-cols-[64px_minmax(0,1fr)_88px]"
}`}
>
<button
@@ -148,10 +148,12 @@ export function PopularRankRow({
className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
/>
<div className="relative z-10 flex items-start gap-2 md:contents">
{showRank ? <RankBadge index={index} /> : null}
<div className="flex w-[64px] shrink-0 flex-col items-center gap-1 md:block md:h-[90px] md:w-[246px]">
<div
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 ${
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" : ""
}`}
>
@@ -168,36 +170,40 @@ export function PopularRankRow({
<FallbackCover type={r.type} />
)}
</div>
<div
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 ${
showRank ? "col-start-3" : "col-start-2"
}`}
<time
dateTime={post.publishedAt}
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)}
</time>
</div>
</div>
<div
className={`relative z-10 row-start-2 ml-auto flex shrink-0 items-center gap-2 md:ml-0 md:pr-6 ${
showRank ? "col-start-3" : "col-start-2"
}`}
<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">
<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] 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
resourceId={r.id}
size="sm"
onFavoriteChange={(favorited) =>
onFavoriteChange?.(post.id, favorited)
}
@@ -209,15 +215,15 @@ export function PopularRankRow({
disabled={isDownloading}
aria-label={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 ? (
<LoaderCircle
className="h-5 w-5 animate-spin"
className="h-4 w-4 animate-spin"
strokeWidth={2.3}
/>
) : (
<DownloadCloudIcon className="h-6 w-6" />
<DownloadCloudIcon className="h-5 w-5" />
)}
</button>
) : null}