Zoomable Image

import ZoomableImage from "@/components/ui/zoomable-image";

export default function Default() {
  return (
    <div className="flex flex-col items-center gap-3 p-8">
      <p className="text-sm text-muted-foreground">
        click the image to zoom in, click again or scroll to close.
      </p>
      <ZoomableImage
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=900&q=80"
        alt="A beautiful landscape"
        className="rounded-lg w-full max-w-md"
      />
    </div>
  );
}