50 lines
1.0 KiB
TypeScript
50 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface FloatingImageProps {
|
|
src: string;
|
|
alt: string;
|
|
width: number;
|
|
height: number;
|
|
float?: "left" | "right";
|
|
caption?: string;
|
|
}
|
|
|
|
export function FloatingImage({
|
|
src,
|
|
alt,
|
|
width,
|
|
height,
|
|
float = "right", // Default to floating right
|
|
caption,
|
|
}: FloatingImageProps) {
|
|
const floatClasses = {
|
|
"float-right ml-6": float === "right",
|
|
"float-left mr-6": float === "left",
|
|
};
|
|
|
|
return (
|
|
// Use <figure> for semantic HTML, and `not-prose` to escape typography styles
|
|
<figure
|
|
className={cn(
|
|
"not-prose mb-4 w-full sm:w-1/2",
|
|
floatClasses
|
|
)}
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
width={width}
|
|
height={height}
|
|
className="m-0 rounded-lg" // remove default prose margins from image
|
|
/>
|
|
{caption && (
|
|
<figcaption className="mt-2 text-sm text-center italic text-muted-foreground">
|
|
{caption}
|
|
</figcaption>
|
|
)}
|
|
</figure>
|
|
);
|
|
} |