f6e3963b99
All checks were successful
Deploy to Staging / Build Images (push) Successful in 1m11s
Deploy to Staging / Deploy to Staging (push) Successful in 42s
Deploy to Staging / Verify Staging (push) Successful in 4s
Deploy to Staging / Notify Staging Ready (push) Successful in 3s
Deploy to Staging / Notify Staging Failure (push) Has been skipped
36 lines
940 B
TypeScript
36 lines
940 B
TypeScript
type GuideScreenshotSize = 'wide' | 'narrow';
|
|
|
|
interface GuideScreenshotProps {
|
|
src: string;
|
|
alt: string;
|
|
caption?: string;
|
|
mobile?: boolean;
|
|
size?: GuideScreenshotSize;
|
|
}
|
|
|
|
const SIZE_CLASS: Record<GuideScreenshotSize, string> = {
|
|
wide: 'max-w-4xl',
|
|
narrow: 'max-w-lg',
|
|
};
|
|
|
|
export const GuideScreenshot = ({ src, alt, caption, mobile, size = 'wide' }: GuideScreenshotProps) => {
|
|
const widthClass = mobile ? 'max-w-[375px]' : SIZE_CLASS[size];
|
|
return (
|
|
<figure className={`my-6 ${widthClass} mx-auto`}>
|
|
<div className="rounded-lg overflow-hidden border border-white/10 shadow-lg shadow-black/20">
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
loading="lazy"
|
|
className="max-w-full h-auto"
|
|
/>
|
|
</div>
|
|
{caption && (
|
|
<figcaption className="mt-2 text-center text-sm text-titanio/70 italic">
|
|
{caption}
|
|
</figcaption>
|
|
)}
|
|
</figure>
|
|
);
|
|
};
|