94 lines
1.9 KiB
TypeScript
94 lines
1.9 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import type { StaticImageItem } from "@/lib/meshkee/types";
|
|
import {
|
|
imageSubtext,
|
|
imageTitleEn,
|
|
imageTitleFa,
|
|
} from "@/lib/meshkee/static-slots";
|
|
|
|
export function SlotBanner({
|
|
image,
|
|
fallbackEyebrow,
|
|
fallbackTitle,
|
|
fallbackText,
|
|
className = "banner",
|
|
}: {
|
|
image?: StaticImageItem | null;
|
|
fallbackEyebrow?: string;
|
|
fallbackTitle: string;
|
|
fallbackText: string;
|
|
className?: string;
|
|
}) {
|
|
const titleFa = imageTitleFa(image) || fallbackTitle;
|
|
const titleEn = imageTitleEn(image) || fallbackEyebrow || "";
|
|
const subtext = imageSubtext(image) || fallbackText;
|
|
const style = image?.url
|
|
? {
|
|
backgroundImage: `linear-gradient(135deg, rgba(0, 35, 75, 0.72), rgba(136, 63, 63, 0.62)), url(${image.url})`,
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
}
|
|
: undefined;
|
|
|
|
const content = (
|
|
<>
|
|
{titleEn ? <p className="eyebrow">{titleEn}</p> : null}
|
|
<h3>{titleFa}</h3>
|
|
<p>{subtext}</p>
|
|
</>
|
|
);
|
|
|
|
if (image?.linkUrl) {
|
|
return (
|
|
<a href={image.linkUrl} className={className} style={style}>
|
|
{content}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={className} style={style}>
|
|
{content}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SlotLinkedImage({
|
|
image,
|
|
fallbackSrc,
|
|
alt,
|
|
width,
|
|
height,
|
|
className,
|
|
}: {
|
|
image?: StaticImageItem | null;
|
|
fallbackSrc: string;
|
|
alt: string;
|
|
width: number;
|
|
height: number;
|
|
className?: string;
|
|
}) {
|
|
const src = image?.url || fallbackSrc;
|
|
const resolvedAlt = imageTitleFa(image) || alt;
|
|
const node = (
|
|
<Image
|
|
src={src}
|
|
alt={resolvedAlt}
|
|
width={width}
|
|
height={height}
|
|
className={className}
|
|
/>
|
|
);
|
|
|
|
if (image?.linkUrl) {
|
|
return (
|
|
<a href={image.linkUrl} aria-label={resolvedAlt}>
|
|
{node}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return node;
|
|
}
|