@shipsite.dev/components 0.2.20 → 0.2.22

package/src/ui/theme-image.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { cn } from '../lib/utils';
+
+export type ImageSource = string | { light: string; dark: string };
+
+interface ThemeImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+  src: ImageSource;
+}
+
+export function ThemeImage({ src, className, ...props }: ThemeImageProps) {
+  if (typeof src === 'string') {
+    return <img src={src} className={className} {...props} />;
+  }
+  return (
+    <>
+      <img src={src.light} className={cn(className, 'dark:hidden')} {...props} />
+      <img src={src.dark} className={cn(className, 'hidden dark:block')} {...props} />
+    </>
+  );
+}