component

Author: aditya520

components/DualModeImage.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import Image from "next/image";
+
+
+type ImageProps = ComponentProps<typeof Image>;
+type Props = Omit<ImageProps, "src"> & {
+  darkSrc: ImageProps["src"];
+  lightSrc: ImageProps["src"];
+  alt: string;
+}
+
+const DualModeImage = ({ darkSrc, lightSrc, className, alt, ...props }: Props) => {
+  return (
+    <>
+      <Image src={lightSrc} className={`dark:hidden ${className}`} alt={alt} {...props} />
+      <Image src={darkSrc} className={`hidden dark:block ${className}`} alt={alt} {...props} />
+    </>
+  );
+};
+
+export default DualModeImage;

images/ois/Graph 1 Light.png

@@ -1,4 +1,5 @@
 import RewardSimulator from "@/components/RewardSimulator";
+import DualModeImage from "../../../components/DualModeImage";
 import Image from "next/image";
 import OIS_Rewards_Example_Dark_1 from "../../../images/ois/OIS_Rewards_Example_Dark_1.png";
 import OIS_Rewards_Example_Light_1 from "../../../images/ois/OIS_Rewards_Example_Light_1.png";
@@ -36,19 +37,12 @@ $$
 \end{aligned}
 $$
 
-<Image
-  src={OIS_Rewards_Example_Light_1}
+<DualModeImage
+  darkSrc={OIS_Rewards_Example_Dark_1}
+  lightSrc={OIS_Rewards_Example_Light_1}
   alt="Example 1"
   sizes="100%"
   placeholder="blur"
-  className="dark:hidden"
-/>
-<Image
-  src={OIS_Rewards_Example_Dark_1}
-  alt="Example 1"
-  sizes="100%"
-  placeholder="blur"
-  className="hidden dark:block"
 />
 
 ## Example 2: Publisher and Delegator Stake
@@ -72,19 +66,12 @@ $$
 \end{aligned}
 $$
 
-<Image
-  src={OIS_Rewards_Example_Light_2}
-  alt="Example 2"
-  sizes="100%"
-  placeholder="blur"
-  className="dark:hidden"
-/>
-<Image
-  src={OIS_Rewards_Example_Dark_2}
+<DualModeImage
+  darkSrc={OIS_Rewards_Example_Dark_2}
+  lightSrc={OIS_Rewards_Example_Light_2}
   alt="Example 2"
   sizes="100%"
   placeholder="blur"
-  className="hidden dark:block"
 />
 
 ## Example 3: Publisher and Delegator Stake more than the Cap
@@ -108,19 +95,12 @@ $$
 \end{aligned}
 $$
 
-<Image
-  src={OIS_Rewards_Example_Light_3}
+<DualModeImage
+  darkSrc={OIS_Rewards_Example_Dark_3}
+  lightSrc={OIS_Rewards_Example_Light_3}
   alt="Example 3"
   sizes="100%"
   placeholder="blur"
-  className="dark:hidden"
-/>
-<Image
-  src={OIS_Rewards_Example_Dark_3}
-  alt="Example 3"
-  sizes="100%"
-  placeholder="blur"
-  className="hidden dark:block"
 />
 
 ## Example 4: Introducing Delegator Fees
@@ -148,19 +128,12 @@ $$
 \end{aligned}
 $$
 
-<Image
-  src={OIS_Rewards_Example_Light_4}
-  alt="Example 4"
-  sizes="100%"
-  placeholder="blur"
-  className="dark:hidden"
-/>
-<Image
-  src={OIS_Rewards_Example_Dark_4}
+<DualModeImage
+  darkSrc={OIS_Rewards_Example_Dark_4}
+  lightSrc={OIS_Rewards_Example_Light_4}
   alt="Example 4"
   sizes="100%"
   placeholder="blur"
-  className="hidden dark:block"
 />
 
 In the example, the delegator pays a 2\% fee on their rewards to the publisher. This fee is deducted from the delegator's reward and added to the publisher's reward.