fix: responsive

Valimp · Apr 11, 2024 · f0e560c · f0e560c
1 parent 1a43bc0
commit f0e560c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/Image.tsx b/src/components/Image.tsx
@@ -3,16 +3,17 @@ interface ImageProps {
   alt: string
   width: string
   height: string
+  isResponsive?: boolean
 }
 
-const Image = ({ src, alt, width, height }: ImageProps) => {
+const Image = ({ src, alt, width, height, isResponsive }: ImageProps) => {
   return (
     <div className="self-center">
       <img
       src={src}
       alt={alt}
       style={{ width: `${width}px`, height: `${height}px`, borderRadius: '10px'}}
-      className="object-cover"
+      className={ isResponsive ? 'object-cover' : ''}
       />
     </div>
   )

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -63,17 +63,17 @@ const HomePage = () => {
         <Title>mon travail</Title>
         <div className='grid lg:grid-cols-2 grid-cols-1 gap-5'>
           <Card url='https://github.com/Valimp/vite-react-ts'>
-            <Image src='/vite-react-ts/project1.jpg' alt="project1" width="400" height="250" />
+            <Image src='/vite-react-ts/project1.jpg' alt="project1" width="400" height="250"  isResponsive={true}/>
             <h3 className='text-gray-dark dark:text-gray-light mt-3 text-xl font-bold'>Mon portfolio</h3>
             <p className='text-gray-default mt-2'>Vous y êtes ! Il est beau n'est ce pas ? Restez autant que vous le voudrez.</p>
           </Card>
           <Card url='https://github.com/openfoodfacts/nutripatrol-frontend'>
-            <Image src='/vite-react-ts/project2.jpg' alt="project2" width="400" height="250" />
+            <Image src='/vite-react-ts/project2.jpg' alt="project2" width="400" height="250"  isResponsive={true}/>
             <h3 className='text-gray-dark dark:text-gray-light mt-3 text-xl font-bold'>L'interface Nutripatrol</h3>
             <p className='text-gray-default mt-2'>Une interface de moderation de tickets. Et opensource s'il vous plait !</p>
           </Card>
           <Card url='https://github.com/openfoodfacts/nutripatrol'>
-            <Image src='/vite-react-ts/project3.jpg' alt="project3" width="400" height="250"/>
+            <Image src='/vite-react-ts/project3.jpg' alt="project3" width="400" height="250" isResponsive={true} />
             <h3 className='text-gray-dark dark:text-gray-light mt-3 text-xl font-bold'>L' API Nutripatrol</h3>
             <p className='text-gray-default mt-2'>J'avais dit développeur fullstack, alors je développe aussi des APIs.</p>
           </Card>