Screenshot

1import Image, { type ImageProps } from "next/image";
2 
3import { cn } from "@/lib/utils";
4 
5interface ScreenshotProps {
6  srcLight: string;
7  srcDark?: string;
8  alt: string;
9  width: number;
10  height: number;
11  loading?: ImageProps["loading"];
12  className?: string;
13}
14 
15export default function Screenshot({
16  srcLight,
17  srcDark,
18  alt,
19  width,
20  height,
21  loading,
22  className,
23}: ScreenshotProps) {
24  if (!srcDark) {
25    return (
26      <Image
27        src={srcLight}
28        alt={alt}
29        width={width}
30        height={height}
31        loading={loading}
32        className={className}
33        unoptimized={srcLight.endsWith(".svg")}
34      />
35    );
36  }
37 
38  return (
39    <>
40      <Image
41        src={srcLight}
42        alt={alt}
43        width={width}
44        height={height}
45        loading={loading}
46        className={cn(className, "block dark:hidden")}
47        unoptimized={srcLight.endsWith(".svg")}
48      />
49      <Image
50        src={srcDark}
51        alt={alt}
52        width={width}
53        height={height}
54        loading={loading}
55        className={cn(className, "hidden dark:block")}
56        unoptimized={srcDark.endsWith(".svg")}
57      />
58    </>
59  );
60}