From a2200187ad13a052324c51d3faa4f0e5ea15c733 Mon Sep 17 00:00:00 2001
From: Erik Figueiredo <erik.figueiredo@gmail.com>
Date: Tue, 3 Sep 2024 16:01:09 -0300
Subject: [PATCH] feat: adicionado componente de imagem

---
 src/components/card/card-background.tsx |  3 ++-
 src/components/img/index.tsx            | 13 +++++++++++++
 src/layouts/default/default.layout.tsx  |  3 ++-
 3 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 src/components/img/index.tsx

diff --git a/src/components/card/card-background.tsx b/src/components/card/card-background.tsx
index c431b32..2aafc85 100644
--- a/src/components/card/card-background.tsx
+++ b/src/components/card/card-background.tsx
@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react'
+import { Img } from '../img'
 
 export type CardBackgroundProps = {
   children?: ReactNode,
@@ -9,7 +10,7 @@ export const CardBackground = ({ children, src, className, ...props }: CardBackg
   return (
     <>
       <div className="absolute w-full h-full top-0 left-0 z-0 overflow-hidden">
-        <img className='w-full h-full object-cover' src={src} />
+        <Img className='w-full h-full object-cover' src={src} />
       </div>
       {children && <div className={`relative -m-8 p-6 ${className}`} {...props}>{children}</div>}
     </>
diff --git a/src/components/img/index.tsx b/src/components/img/index.tsx
new file mode 100644
index 0000000..428e02d
--- /dev/null
+++ b/src/components/img/index.tsx
@@ -0,0 +1,13 @@
+import { ImgHTMLAttributes, useEffect, useState } from 'react'
+
+type ImgProps = ImgHTMLAttributes<HTMLImageElement>
+
+export const Img = ({ src, ...props }: ImgProps) => {
+  const [localSrc, setLocalSrc] = useState<string>('')
+
+  useEffect(() => {
+    setLocalSrc(`${import.meta.env.VITE_BASE_APP ? import.meta.env.VITE_BASE_APP : '/'}${src}`)
+  }, [src])
+
+  return <img src={localSrc} {...props} />
+}
\ No newline at end of file
diff --git a/src/layouts/default/default.layout.tsx b/src/layouts/default/default.layout.tsx
index 2126ffd..a9ae68c 100644
--- a/src/layouts/default/default.layout.tsx
+++ b/src/layouts/default/default.layout.tsx
@@ -7,6 +7,7 @@ import { Typography } from '../../components/Typography'
 import { Toggle } from '../../components/form/toggle'
 import { Outlet, useNavigate } from 'react-router-dom'
 import { RoutesConfig } from '@config/routes'
+import { Img } from '../../components/img'
 
 type DefaultLayoutProps = {
   title?: string
@@ -47,7 +48,7 @@ export const DefaultLayout = ({ title }: DefaultLayoutProps) => {
           <div className='m-6'>
 
             <a href="" className="flex items-center gap-3">
-              <Rounded><img src="/logo.png" width={50} height={50} /></Rounded>
+              <Rounded><Img src="/logo.png" width={50} height={50} /></Rounded>
               {' '}
               <span>Erik <span className='text-primary'>Dashboard</span></span>
             </a>