feat: link nav to home sections
This commit is contained in:
TerryM
@@ -9,11 +9,7 @@ import {
|
||||
const FIGMA_ASSET_BASE = "/assets/ark-library/figma";
|
||||
|
||||
export const officialRecommendationCoverFallbacks = [
|
||||
`${FIGMA_ASSET_BASE}/official-recommendation-1.png`,
|
||||
`${FIGMA_ASSET_BASE}/official-recommendation-2.png`,
|
||||
`${FIGMA_ASSET_BASE}/official-recommendation-3.png`,
|
||||
`${FIGMA_ASSET_BASE}/official-recommendation-4.png`,
|
||||
`${FIGMA_ASSET_BASE}/official-recommendation-5.png`,
|
||||
`${FIGMA_ASSET_BASE}/official-recommendation-cover.png`,
|
||||
] as const;
|
||||
|
||||
type BannerSlide = {
|
||||
|
||||
@@ -4,8 +4,8 @@ import type { Resource } from "../api";
|
||||
import { assetUrl } from "../api";
|
||||
import { useI18n } from "../i18n";
|
||||
import { useMemo, useState } from "react";
|
||||
import { cleanCategoryDisplayName } from "../utils/categoryDisplay";
|
||||
import { formatDateYmd } from "../utils/format";
|
||||
import { DownloadCloudIcon } from "./icons/DownloadCloudIcon";
|
||||
import { officialRecommendationCoverFallbacks } from "./FigmaBanner";
|
||||
import {
|
||||
downloadAttachment,
|
||||
@@ -17,7 +17,7 @@ function isPlaceholderAsset(path: string | undefined | null) {
|
||||
}
|
||||
|
||||
const CARD_CLASS =
|
||||
"group flex w-[208px] shrink-0 flex-col overflow-hidden rounded-xl border border-transparent bg-[#1D1E23] transition hover:border-ark-gold/55 md:w-[240px] md:border-ark-line md:bg-ark-panel lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";
|
||||
"group flex w-[208px] shrink-0 flex-col overflow-hidden rounded-xl border bg-[#1D1E23] transition hover:border-ark-gold/55 md:w-[240px] lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";
|
||||
|
||||
type RecommendedResource = Resource & {
|
||||
downloadPostId?: string;
|
||||
@@ -48,7 +48,7 @@ export function RecommendedCard({
|
||||
return assetUrl(original);
|
||||
}, [figmaCover, r.coverImage, r.previewUrl, useFigmaDesign]);
|
||||
const displayTitle = r.title;
|
||||
const displayCategoryName = cleanCategoryDisplayName(r.categoryName);
|
||||
const displayCategoryName = r.categoryName;
|
||||
const dateStr = formatDateYmd(r.updatedAt);
|
||||
const dateTime = r.updatedAt;
|
||||
|
||||
@@ -57,11 +57,37 @@ export function RecommendedCard({
|
||||
? assetUrl(r.fileUrl || r.previewUrl)
|
||||
: "";
|
||||
|
||||
const handleDownload = async () => {
|
||||
if (isDownloading) return;
|
||||
setIsDownloading(true);
|
||||
try {
|
||||
if (r.downloadPostId && r.downloadAttachmentId) {
|
||||
await downloadAttachment(
|
||||
r.downloadPostId,
|
||||
r.downloadAttachmentId,
|
||||
displayTitle,
|
||||
);
|
||||
return;
|
||||
}
|
||||
await downloadFile(dl, displayTitle);
|
||||
} catch {
|
||||
/* ignore */
|
||||
} finally {
|
||||
setIsDownloading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<article className={CARD_CLASS}>
|
||||
<article
|
||||
className={`${CARD_CLASS} ${
|
||||
useFigmaDesign
|
||||
? "border-[#27292E]"
|
||||
: "border-transparent md:border-ark-line md:bg-ark-panel"
|
||||
}`}
|
||||
>
|
||||
<Link
|
||||
to={`/resource/${r.id}`}
|
||||
className="relative block h-[108px] overflow-hidden bg-black md:aspect-[246.4/138.6] md:h-auto"
|
||||
className="relative block h-[108px] overflow-hidden bg-[#111116] md:aspect-[246.4/138.6] md:h-auto"
|
||||
>
|
||||
{cover ? (
|
||||
<img
|
||||
@@ -69,7 +95,7 @@ export function RecommendedCard({
|
||||
alt=""
|
||||
className={`h-full w-full object-cover transition duration-300 ${
|
||||
useFigmaDesign
|
||||
? "origin-top scale-[1.08] group-hover:scale-[1.1]"
|
||||
? "group-hover:scale-[1.02]"
|
||||
: "group-hover:scale-[1.02]"
|
||||
}`}
|
||||
loading="lazy"
|
||||
@@ -77,60 +103,83 @@ export function RecommendedCard({
|
||||
) : (
|
||||
<div className="h-full w-full bg-gradient-to-br from-neutral-900 to-neutral-950" />
|
||||
)}
|
||||
{r.badgeLabel ? (
|
||||
{!useFigmaDesign && r.badgeLabel ? (
|
||||
<span className="absolute left-3 top-3 rounded-md bg-ark-gold px-2.5 py-1 text-xs font-semibold text-black">
|
||||
{r.badgeLabel}
|
||||
</span>
|
||||
) : null}
|
||||
</Link>
|
||||
<div className="flex min-h-[131px] flex-1 flex-col p-4 pt-3 md:min-h-[121px]">
|
||||
<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"
|
||||
<div
|
||||
className={
|
||||
useFigmaDesign
|
||||
? "flex h-[131px] flex-col px-4 py-3"
|
||||
: "flex min-h-[131px] flex-1 flex-col p-4 pt-3 md:min-h-[121px]"
|
||||
}
|
||||
>
|
||||
<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"
|
||||
>
|
||||
{displayTitle}
|
||||
</Link>
|
||||
{useFigmaDesign ? (
|
||||
<div className="truncate text-[12px] font-normal leading-[17.376px] text-[#A8A9AE]">
|
||||
{displayCategoryName}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
useFigmaDesign
|
||||
? "mt-auto flex h-10 items-end justify-between gap-2"
|
||||
: "mt-auto flex items-center justify-between gap-2 pt-4 text-[12px] leading-[17.38px] text-ark-muted"
|
||||
}
|
||||
>
|
||||
{displayTitle}
|
||||
</Link>
|
||||
<div className="mt-auto flex items-center justify-between gap-2 pt-4 text-[12px] leading-[17.38px] text-ark-muted">
|
||||
<div className="min-w-0 truncate">
|
||||
<span className="text-neutral-400">{displayCategoryName}</span>
|
||||
<span className="mx-1.5 text-ark-line">·</span>
|
||||
<div
|
||||
className={
|
||||
useFigmaDesign
|
||||
? "min-w-0 truncate pb-[1px] text-[12px] font-normal leading-[17.376px] text-[#A8A9AE]"
|
||||
: "min-w-0 truncate"
|
||||
}
|
||||
>
|
||||
{useFigmaDesign ? null : (
|
||||
<>
|
||||
<span className="text-neutral-400">{displayCategoryName}</span>
|
||||
<span className="mx-1.5 text-ark-line">·</span>
|
||||
</>
|
||||
)}
|
||||
<time dateTime={dateTime}>{dateStr}</time>
|
||||
</div>
|
||||
{dl ? (
|
||||
<button
|
||||
type="button"
|
||||
className="shrink-0 rounded-lg p-1 text-ark-gold outline-none hover:bg-ark-gold/10 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
|
||||
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] focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
|
||||
: "shrink-0 rounded-lg p-1 text-ark-gold outline-none hover:bg-ark-gold/10 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={async (e) => {
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (isDownloading) return;
|
||||
setIsDownloading(true);
|
||||
try {
|
||||
if (r.downloadPostId && r.downloadAttachmentId) {
|
||||
await downloadAttachment(
|
||||
r.downloadPostId,
|
||||
r.downloadAttachmentId,
|
||||
displayTitle,
|
||||
);
|
||||
return;
|
||||
}
|
||||
await downloadFile(dl, displayTitle);
|
||||
} catch {
|
||||
/* ignore */
|
||||
} finally {
|
||||
setIsDownloading(false);
|
||||
}
|
||||
void handleDownload();
|
||||
}}
|
||||
>
|
||||
{isDownloading ? (
|
||||
<LoaderCircle
|
||||
className="h-5 w-5 animate-spin"
|
||||
className={
|
||||
useFigmaDesign
|
||||
? "h-5 w-5 animate-spin"
|
||||
: "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} />
|
||||
)}
|
||||
@@ -154,7 +203,7 @@ export function ComingSoonRecommendedCard({
|
||||
|
||||
return (
|
||||
<article
|
||||
className={`${CARD_CLASS} cursor-default opacity-95`}
|
||||
className={`${CARD_CLASS} cursor-default border-transparent opacity-95 md:border-ark-line md:bg-ark-panel`}
|
||||
aria-label="即将到来"
|
||||
>
|
||||
<div className="relative block h-[108px] overflow-hidden bg-black md:aspect-[246.4/138.6] md:h-auto">
|
||||
|
||||
Reference in New Issue
Block a user