refactor: Remove RIG and display product details

client/src/components/form/Form.tsx

@@ -27,7 +27,7 @@ export default function From({
       </div>
       <div className={styles.right}>
         <form className={styles.form}>
-          <input type="text" placeholder="Enter Email/Username" />
+          <input type="text" placeholder="Username" />
           <input type="password" placeholder="Password" />
           <small className={styles.fromSmall}>
             By continuing, you agree to Flipkart's

client/src/layouts/header/Header.tsx

@@ -41,9 +41,7 @@ function Header() {
             <button className={styles.headerLoginBtn}>Login</button>
           </Link>
         </div>
-        <div>
-          <Link to="/products">All products</Link>
-        </div>
+        <div>{/* <Link to="/products">All products</Link> */}</div>
         <div>
           <Link to="#">Become a Seller</Link>
         </div>

client/src/pages/product-details/ProductDetailsPage.module.css

@@ -7,9 +7,19 @@
   margin-top: 1rem;
 }
 
-.image-gallery-wrapper {
-  max-width: 40rem;
-  min-height: 30rem;
+.product-image {
+  height: 20rem;
+  width: 20rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.product-image img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: cover;
 }
 
 .go-to-cart-page,

client/src/pages/product-details/ProductDetailsPage.tsx

@@ -1,12 +1,11 @@
 import { Link, useParams } from 'react-router-dom'
-// @ts-expect-error - no type defination for RIG
-import ImageGallery from 'react-image-gallery'
 
 import Loader from '@/components/loader/Loader'
 import useHandleDispatch from '@/hooks/useHandleDispatch'
 import { useGetProductByIdQuery } from '@/state/services/productApi'
 import { useAppSelector } from '@/state/store'
-import { getOriginalAndThumbnailImg, isItemInCart } from '@/utils'
+import { isItemInCart } from '@/utils'
+import { Rating } from '@mui/material'
 import styles from './ProductDetailsPage.module.css'
 
 export default function ProductDetailsPage() {
@@ -17,19 +16,11 @@ export default function ProductDetailsPage() {
   const cartData = useAppSelector((state) => state.cart)
   if (isFetching || !data) return <Loader />
 
-  const Images = getOriginalAndThumbnailImg(data.images)
-
   return (
     <div className={styles.productDetailsContainer}>
       <div>
-        <div className={styles.imageGalleryWrapper}>
-          <ImageGallery
-            items={Images}
-            thumbnailPosition="left"
-            showPlayButton={false}
-            showFullscreenButton={false}
-            lazyLoad={true}
-          />
+        <div className={styles.productImage}>
+          <img src={data.thumbnail} alt={data.title} />
         </div>
         {isItemInCart(cartData, data) ? (
           <Link to="/cart">
@@ -48,6 +39,13 @@ export default function ProductDetailsPage() {
       </div>
       <div>
         <h3>{data?.title}</h3>
+        <p>{data.description}</p>
+        <p>{data.stock}</p>
+        <Rating name="read-only" value={data.rating} readOnly size="small" />
+        <p>{data.category}</p>
+        <p>{data.brand}</p>
+        <p>${data.price}</p>
+        <p>{data.discountPercentage}%</p>
       </div>
     </div>
   )

client/src/routes.tsx

@@ -7,7 +7,6 @@ import {
 import App from './App'
 import {
   CartPage,
-  HomePage,
   LoginPage,
   PaymentSuccessPage,
   ProductDetailsPage,
@@ -18,8 +17,8 @@ import {
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route element={<App />}>
-      <Route path="/" element={<HomePage />} />
-      <Route path="/products" element={<ProductListingPage />} />
+      {/* <Route path="/" element={<HomePage />} /> */}
+      <Route path="/" element={<ProductListingPage />} />
       <Route path="/products/:id" element={<ProductDetailsPage />} />
       <Route path="/cart" element={<CartPage />} />
       <Route path="/login" element={<LoginPage />} />