38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
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`,
|
|
] as const;
|
|
|
|
export function FigmaBanner() {
|
|
return (
|
|
<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`}
|
|
/>
|
|
<source
|
|
media="(max-width: 575px)"
|
|
srcSet={`${FIGMA_ASSET_BASE}/banner-440.png`}
|
|
/>
|
|
<source
|
|
media="(max-width: 767px)"
|
|
srcSet={`${FIGMA_ASSET_BASE}/banner-576.png`}
|
|
/>
|
|
<img
|
|
src={`${FIGMA_ASSET_BASE}/banner-desktop.png`}
|
|
alt=""
|
|
className="h-auto w-full object-cover"
|
|
width={1280}
|
|
height={290}
|
|
loading="eager"
|
|
decoding="async"
|
|
/>
|
|
</picture>
|
|
);
|
|
}
|