import { Download } from "lucide-react"; import { Link } from "react-router-dom"; import type { Resource } from "../api"; import { assetUrl, postJSON, postNoBody } from "../api"; import { useI18n } from "../i18n"; import { useMemo } from "react"; import { formatDateYmd } from "../utils/format"; import { officialRecommendationCoverFallbacks } from "./FigmaBanner"; import { downloadFile } from "./messageStream/utils/downloadFile"; function isPlaceholderAsset(path: string | undefined | null) { return !path || path.includes("placeholder-cover"); } const CARD_CLASS = "group flex w-[232px] shrink-0 flex-col overflow-hidden rounded-xl border border-ark-line bg-ark-panel transition hover:border-ark-gold/55 max-[439px]:w-[232px] min-[440px]:w-[230px] sm:w-[240px] lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]"; type RecommendedResource = Resource & { downloadPostId?: string; downloadAttachmentId?: string; }; export function RecommendedCard({ r, visualIndex = 0, }: { r: RecommendedResource; visualIndex?: number; }) { const { t } = useI18n(); const cover = useMemo(() => { const original = r.coverImage || r.previewUrl; if (isPlaceholderAsset(original)) { return officialRecommendationCoverFallbacks[ visualIndex % officialRecommendationCoverFallbacks.length ]; } return assetUrl(original); }, [r.coverImage, r.previewUrl, visualIndex]); const dateStr = formatDateYmd(r.updatedAt); const dl = r.isDownloadable && (r.fileUrl || r.previewUrl) ? assetUrl(r.fileUrl || r.previewUrl) : ""; return (
{cover ? ( ) : (
)} {r.badgeLabel ? ( {r.badgeLabel} ) : null}
{r.title}
{r.categoryName} ·
{dl ? ( ) : null}
); } export function ComingSoonRecommendedCard({ visualIndex = 0, }: { visualIndex?: number; }) { const cover = officialRecommendationCoverFallbacks[ visualIndex % officialRecommendationCoverFallbacks.length ]; return (
即将到来
即将到来
更多内容准备中
); }