make css modules for dual mode image

Author: nidhi-singh02

apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx

@@ -4,7 +4,7 @@ description: >-
   This reference page provides examples of various scenarios to illustrate the Mathematical Representations of OIS.
 ---
 
-import DualModeImage from "../../../src/components/dual-mode-image";
+import DualModeImage from "../../../src/components/DualModeImage";
 
 NOTE: All the symbols used in the examples are explained in the [Mathematical Representation](./mathematical-representation) section.
 

apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx

@@ -5,7 +5,7 @@ description: >-
   on the Pyth network.
 ---
 
-import DualModeImage from "../../../src/components/dual-mode-image";
+import DualModeImage from "../../../src/components/DualModeImage";
 
 # Purpose and Scope
 

apps/developer-hub/src/components/DualModeImage/index.module.scss

@@ -0,0 +1,15 @@
+.lightImage {
+  display: block;
+
+  :global(.dark) & {
+    display: none;
+  }
+}
+
+.darkImage {
+  display: none;
+
+  :global(.dark) & {
+    display: block;
+  }
+}

apps/developer-hub/src/components/dual-mode-image.tsx renamed to apps/developer-hub/src/components/DualModeImage/index.tsx

@@ -1,7 +1,10 @@
+import clsx from "clsx";
 import { ImageZoom } from "fumadocs-ui/components/image-zoom";
 import Image from "next/image";
 import type { ComponentProps } from "react";
 
+import styles from "./index.module.scss";
+
 type ImageProps = ComponentProps<typeof Image>;
 type Props = Omit<ImageProps, "src"> & {
   darkSrc: string;
@@ -30,12 +33,12 @@ const DualModeImage = ({
     <>
       <ImageZoom
         src={lightSrc}
-        className={`dark:hidden ${className ?? ""}`}
+        className={clsx(styles.lightImage, className)}
         {...commonProps}
       />
       <ImageZoom
         src={darkSrc}
-        className={`hidden dark:block ${className ?? ""}`}
+        className={clsx(styles.darkImage, className)}
         {...commonProps}
       />
     </>