2.0

src/Components/Breadcrum/Breadcrum.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import './Breadcrumb.css';
+import './Breadcrum.css';
 import arrow_icon from '../Assets/breadcrum_arrow.png'
 
 const Breadcrum = (props) => {

src/Components/Items/Item.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import './item.css'
+import { Link } from 'react-router-dom'
 
 
 const Item = (props) => {
   return (
     <div className='item'>
-      <img src={props.image} alt='img'/>
+      <Link to={`/product/${props.id}`}><img src={props.image} alt='img'/></Link>
       <p>{props.name}</p>
       <div className="item-prices">
          <div className="item-price-new">

src/Components/ProductDisplay/ProductDisplay.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import './ProductDisplay.css'
+import star_icon from '../Assets/star_icon.png'
+import star_dull_icon from '../Assets/star_dull_icon.png'
+
+const ProductDisplay = (props) => {
+    const { product } = props;
+  return (
+    <div className='productdisplay'>
+          <div className="productdisplay-left">
+              <div className="productdisplay-img-list">
+                  <img src={product.image} alt="" />
+                  <img src={product.image} alt="" />
+                  <img src={product.image} alt="" />
+                  <img src={product.image} alt="" />
+              </div>
+              <div className="productdisplay-img-list">
+                  <img className='productdisplay-main-img' src={product.image} alt="" />
+            </div>
+          </div>
+          <div className="prodcutdisplay-right">
+              <h1>{ product.name}</h1>
+              <div className="productdisplay-right-star">
+                  <img src= {star_icon} alt="" />
+                  <img src= {star_icon} alt="" />
+                  <img src= {star_icon} alt="" />
+                  <img src= {star_icon} alt="" />
+                  <img src={star_dull_icon} alt="" />
+                  <p>(122)</p>
+              </div>
+          </div>
+    </div>
+  )
+}
+
+export default ProductDisplay

src/Pages/Prodcut.jsx

@@ -2,14 +2,16 @@ import React, { useContext } from 'react'
 import { ShopContext } from "../Context/ShopContext";
 import { useParams } from 'react-router-dom'
 import Breadcrum from '../Components/Breadcrum/Breadcrum';
+import ProductDisplay from '../Components/ProductDisplay/ProductDisplay';
 
 const Prodcut = () => {
   const { all_prodcuts } = useContext(ShopContext)
   const { prodcutId } = useParams();
   const product = all_prodcuts.find((e)=> e.id === Number(prodcutId))
   return (
     <div>
-      <Breadcrum />
+      <Breadcrum product={product} />
+      <ProductDisplay product={product} />
     </div>
   )
 }