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

feat: apply figma responsive home design
All checks were successful
Deploy to Frontend Servers / deploy (push) Successful in 49s
Details

Browse Source
This commit is contained in:
TerryM
2026-05-17 19:38:43 +08:00
parent 5b67279734
commit 2c76039c44
13 changed files with 69 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/FigmaBanner.tsx
View File

@@ -1,16 +1,16 @@
const FIGMA_ASSET_BASE = "/assets/ark-library/figma";
export const recommendationCoverFallbacks = [
`${FIGMA_ASSET_BASE}/recommendation-1.png`,
`${FIGMA_ASSET_BASE}/recommendation-2.png`,
`${FIGMA_ASSET_BASE}/recommendation-3.png`,
`${FIGMA_ASSET_BASE}/recommendation-4.png`,
`${FIGMA_ASSET_BASE}/recommendation-5.png`,
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`,
] as const;
export function FigmaBanner() {
return (
<picture className="block overflow-hidden border border-[#2a2a32] bg-black shadow-[0_24px_70px_rgba(0,0,0,0.18)] max-md:-mx-4 max-md:rounded-none max-md:border-x-0 md:rounded-xl">
<picture className="-mx-4 block overflow-hidden border border-[#2a2a32] bg-black shadow-[0_24px_70px_rgba(0,0,0,0.18)] min-[440px]:-mx-5 sm:-mx-6 md:mx-0 md:rounded-xl">
<source
media="(max-width: 439px)"
srcSet={`${FIGMA_ASSET_BASE}/banner-375.png`}

12
src/components/RecommendedCard.tsx
View File

@@ -5,14 +5,14 @@ import { assetUrl, postJSON } from "../api";
import { useI18n } from "../i18n";
import { useMemo } from "react";
import { formatDateYmd } from "../utils/format";
import { recommendationCoverFallbacks } from "./FigmaBanner";
import { officialRecommendationCoverFallbacks } from "./FigmaBanner";
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]";
"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]";
export function RecommendedCard({
r,
@@ -25,8 +25,8 @@ export function RecommendedCard({
const cover = useMemo(() => {
const original = r.coverImage || r.previewUrl;
if (isPlaceholderAsset(original)) {
return recommendationCoverFallbacks[
visualIndex % recommendationCoverFallbacks.length
return officialRecommendationCoverFallbacks[
visualIndex % officialRecommendationCoverFallbacks.length
];
}
return assetUrl(original);
@@ -105,8 +105,8 @@ export function ComingSoonRecommendedCard({
visualIndex?: number;
}) {
const cover =
recommendationCoverFallbacks[
visualIndex % recommendationCoverFallbacks.length
officialRecommendationCoverFallbacks[
visualIndex % officialRecommendationCoverFallbacks.length
];
return (