Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
3.0 kB · 110 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111import { existsSync } from "node:fs";import { join } from "node:path";
import Image from "next/image";
import { getImageDimensions } from "../../lib/image-dimensions";import { cn } from "../../lib/utils";import { ImageZoom, ZoomableImage } from "../image-zoom";
type CustomImageProps = React.ComponentProps<typeof Image> & { disableZoom?: boolean;};
export function CustomImage({ className, disableZoom, ...props}: CustomImageProps) { const { src, alt, width, height, ...rest } = props;
if (!src || typeof src !== "string") { return ( <figure> <ImageZoom backdropClassName={cn( '[&_[data-rmiz-modal-overlay="visible"]]:bg-background/80', )} zoomMargin={16} > <Image className={className} src={src} alt={alt ?? "image"} fill sizes="100vw" style={{ objectFit: "contain" }} {...rest} /> </ImageZoom> <figcaption>{alt}</figcaption> </figure> ); }
// Get actual image dimensions from filesystem const dimensions = getImageDimensions(src); const imageWidth = width || dimensions?.width || 1200; const imageHeight = height || dimensions?.height || 630;
// Generate dark mode image path by adding .dark before extension const getDarkImagePath = (path: string) => { const match = path.match(/^(.+)(\.[^.]+)$/); if (match) { return `${match[1]}.dark${match[2]}`; } return path; };
// Check if dark image exists, fallback to light version if not const checkDarkImageExists = (darkPath: string) => { // If path starts with /, it's in the public directory if (darkPath.startsWith("/")) { const publicPath = join(process.cwd(), "public", darkPath); return existsSync(publicPath); } // For relative paths, check relative to public const publicPath = join(process.cwd(), "public", darkPath); return existsSync(publicPath); };
const darkSrc = getDarkImagePath(src); const useDarkImage = checkDarkImageExists(darkSrc);
if (disableZoom) { return ( <> <Image {...rest} src={src} alt={alt ?? ""} width={imageWidth as number} height={imageHeight as number} className={cn(className, useDarkImage && "dark:hidden")} /> {useDarkImage ? ( <Image {...rest} src={darkSrc} alt={alt ?? ""} width={imageWidth as number} height={imageHeight as number} className={cn(className, "hidden dark:block")} /> ) : null} </> ); }
return ( <ZoomableImage {...rest} src={src} alt={alt} className={className} darkSrc={useDarkImage ? darkSrc : undefined} imageWidth={imageWidth as number} imageHeight={imageHeight as number} /> );}