51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface CenteredImageProps {
|
|
src: string;
|
|
alt: string;
|
|
width: number;
|
|
height: number;
|
|
caption?: string;
|
|
// New prop to control the max width as a percentage
|
|
maxWidth?: "50%" | "75%" | "100%";
|
|
}
|
|
|
|
export function CenteredImage({
|
|
src,
|
|
alt,
|
|
width,
|
|
height,
|
|
caption,
|
|
maxWidth = "100%", // Default to 100% of the column width
|
|
}: CenteredImageProps) {
|
|
// Map the user-friendly prop to actual TailwindCSS classes
|
|
const widthClasses = {
|
|
"50%": "sm:max-w-[50%]",
|
|
"75%": "sm:max-w-[75%]",
|
|
"100%": "max-w-full", // `max-w-full` is the default for responsive images
|
|
};
|
|
|
|
return (
|
|
// Use <figure> for the image and its caption
|
|
// `not-prose` escapes Tailwind Typography styles
|
|
// `mx-auto` is the key to centering the block
|
|
<figure className={cn("not-prose mx-auto my-6", widthClasses[maxWidth])}>
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
width={width}
|
|
height={height}
|
|
// `mx-auto` on the image itself helps in some flex contexts
|
|
className="mx-auto rounded-lg"
|
|
/>
|
|
{caption && (
|
|
<figcaption className="mt-2 text-sm text-center italic text-muted-foreground">
|
|
{caption}
|
|
</figcaption>
|
|
)}
|
|
</figure>
|
|
);
|
|
} |