Merge remote-tracking branch 'upstream/dev' into feat/color-stories-tailwind

Author: TylerAPfledderer

src/components/ActionCard.tsx

@@ -1,7 +1,7 @@
 import { StaticImageData } from "next/image"
 import type { BaseHTMLAttributes, ElementType, ReactNode } from "react"
 
-import { TwImage } from "@/components/Image"
+import { Image } from "@/components/Image"
 import InlineLink from "@/components/ui/Link"
 import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
 
@@ -53,7 +53,7 @@ const ActionCard = ({
           isRight ? "justify-end" : "justify-center"
         )}
       >
-        <TwImage
+        <Image
           src={image}
           alt={alt || ""}
           width={imageWidth}

src/components/AssetDownload/AssetDownloadImage.tsx

@@ -1,6 +1,6 @@
 import { ImageProps } from "next/image"
 
-import { TwImage } from "../Image"
+import { Image } from "../Image"
 import { Center } from "../ui/flex"
 
 interface AssetDownloadImageProps {
@@ -10,7 +10,7 @@ interface AssetDownloadImageProps {
 
 const AssetDownloadImage = ({ image, alt }: AssetDownloadImageProps) => (
   <Center className="w-full border p-8">
-    <TwImage src={image} alt={alt} className="w-full self-center" />
+    <Image src={image} alt={alt} className="w-full self-center" />
   </Center>
 )
 

src/components/Avatar/index.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils/cn"
 
-import { TwImage } from "../Image"
+import { Image } from "../Image"
 import { ButtonLink } from "../ui/buttons/Button"
 import { Flex, Stack } from "../ui/flex"
 
@@ -29,7 +29,7 @@ function ContributorsQuizBanner({
           "px-8 md:px-0"
         )}
       >
-        <TwImage
+        <Image
           className="absolute max-h-[120%] w-full object-contain"
           src={PeopleLearning}
           alt="People learning about Ethereum"

src/components/Banners/ContributorsQuizBanner.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "next-i18next"
 import type { TranslationKey } from "@/lib/types"
 
 import Emoji from "@/components/Emoji"
-import { type ImageProps, TwImage } from "@/components/Image"
+import { Image, type ImageProps } from "@/components/Image"
 
 import { cn } from "@/lib/utils/cn"
 
@@ -43,7 +43,7 @@ const Callout = ({
     >
       {image && (
         <div className="-mt-40 self-center">
-          <TwImage
+          <Image
             src={image}
             alt={alt || ""}
             className="max-h-[263px] min-h-[200px] max-w-[263px] object-contain"

src/components/Buttons/Button.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "next-i18next"
 
 import type { TranslationKey } from "@/lib/types"
 
-import { type ImageProps, TwImage } from "@/components/Image"
+import { Image, type ImageProps } from "@/components/Image"
 
 import { cn } from "@/lib/utils/cn"
 
@@ -36,7 +36,7 @@ const CalloutBanner = ({
       {...props}
     >
       <div className="flex">
-        <TwImage
+        <Image
           src={image}
           alt={alt}
           width={imageWidth}