Handle admin product screen design when product has 1 photo

Author: kkamara

frontend/src/components/pages/adminDashboard/products/ProductComponent.jsx

@@ -37,6 +37,13 @@ export default function ProductComponent() {
   }
 
   const renderProductPhotos = () => {
+    if (1 === state.adminGetProduct.data.photos.length) {
+      return <img
+        className="img-fluid product-image"
+        src={state.adminGetProduct.data.photos[0].path}
+      />
+    }
+
     return <Zoom indicators={indicators}>
       {state.adminGetProduct.data.photos.map(({ path, }, index) => (
         <div key={index} className="each-slide-effect">

frontend/src/components/pages/adminDashboard/products/ProductComponent.scss

@@ -10,6 +10,13 @@
     margin: 0px auto;
   }
 
+  .product-image {
+    max-height: 250px;
+    max-width: 200px;
+    margin: 0px auto;
+    display: flex;
+  }
+
   .each-slide-effect span {
     padding: 20px;
     font-size: 20px;