38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
|
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`,
|
||
|
|
] 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">
|
||
|
|
<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>
|
||
|
|
);
|
||
|
|
}
|