fix: 🐛 fixing image usage in the application

src/components/deck-card-list/deck-card-list.component.tsx

@@ -9,7 +9,7 @@ import { Error } from './error.component'
 import { Loading } from './loading.component'
 
 export function DeckCardList({ decks }: DeckCardListProps) {
-  if (decks.length === 0)
+  if (decks.length === 0 || true)
     return (
       <Feedback
         shouldHideButton

src/components/feedback/feedback.component.tsx

@@ -2,7 +2,6 @@ import { useRouter } from 'next/router'
 
 import { Button } from '~/components/button'
 import { Image } from '~/components/image'
-import PettingImage from '~/images/petting.svg'
 import { routes } from '~/utils/navigation'
 
 import type { FeedbackProps } from './feedback.types'
@@ -16,7 +15,7 @@ export function Feedback(props: FeedbackProps) {
     buttonLabel,
     onButtonClick,
     shouldHideButton,
-    CustomImage,
+    customImageSrc,
   } = props
 
   const router = useRouter()
@@ -52,8 +51,9 @@ export function Feedback(props: FeedbackProps) {
         </div>
         <Image
           width={300}
-          src={CustomImage || PettingImage}
+          height={300}
           alt={`${subtitle} illustration`}
+          src={customImageSrc || '/images/petting.svg'}
         />
       </div>
       {renderButton()}

src/components/feedback/feedback.types.ts

@@ -1,10 +1,8 @@
-import type { StaticImageData } from 'next/image'
-
 export type FeedbackProps = {
   title: (() => JSX.Element) | string
   subtitle: (() => JSX.Element) | string
   buttonLabel?: string
   onButtonClick?: () => void
   shouldHideButton?: boolean
-  CustomImage?: StaticImageData
+  customImageSrc?: string
 }

src/components/image/image.component.tsx

@@ -13,7 +13,7 @@ const shimmer = `
 const MINIMUM_IMAGE_SIZE_WITH_BLUE = 40
 
 function BaseImage(props: ImageProps) {
-  const { width, height, ...otherProps } = props
+  const { width, height, style, ...otherProps } = props
 
   const blurProps: Pick<ImageProps, 'placeholder' | 'blurDataURL'> =
     useMemo(() => {
@@ -32,6 +32,11 @@ function BaseImage(props: ImageProps) {
       width={width}
       height={height}
       data-testid='image-component'
+      style={{
+        width: width,
+        height: height,
+        ...style,
+      }}
       {...blurProps}
       {...otherProps}
     />

src/pages/decks/review/[id].tsx

@@ -9,7 +9,6 @@ import { Feedback } from '~/components/feedback'
 import { Loader } from '~/components/loader'
 import { TextArea } from '~/components/text-area'
 import { Tooltip } from '~/components/tooltip'
-import SwingingImage from '~/images/swinging.svg'
 import { useDeckReview } from '~/modules/decks/review/hooks/use-deck-review.hook'
 import type { WithAuthentication } from '~/types/auth'
 import { classNames } from '~/utils/css'
@@ -143,7 +142,7 @@ const ReviewDeck: WithAuthentication<
       return (
         <Feedback
           title='🎉 Parabéns!!!'
-          CustomImage={SwingingImage}
+          customImageSrc='/images/swinging.svg'
           subtitle='Você revisou todos os Cards pendentes. Volte novamente na sua próxima revisão.'
           {...okButton}
         />
@@ -154,7 +153,7 @@ const ReviewDeck: WithAuthentication<
       return (
         <Feedback
           title='🎉 Woohooo!!!'
-          CustomImage={SwingingImage}
+          customImageSrc='/images/swinging.svg'
           subtitle={() => (
             <>
               No momento nenhum Card precisa ser revisado. Por favor, volte mais