فیلم 17

frontend/src/index.css

@@ -44,6 +44,16 @@ footer {
 .row.center {
   justify-content: center;
 }
+.row.top {
+  align-items: flex-start;
+}
+.col-1 {
+  flex: 1 1 25rem;
+}
+.col-2 {
+  flex: 2 1 50rem;
+}
+
 a.brand {
   color: #ffffff;
   font-size: 3rem;
@@ -65,11 +75,14 @@ h2 {
   font-size: 1.6rem;
   padding: 1rem 0;
 }
-
+/* image */
 img.medium {
   max-width: 29rem;
   width: 100%;
 }
+img.large {
+  width: 100%;
+}
 .rating span {
   color: #f0c040;
   margin: 0.1rem;

frontend/src/screens/ProductScreen.js

-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useEffect } from "react";
 import { detailsProduct } from "../actions/productActions";
+import MessageBox from "../components/MessageBox";
+import LoadingBox from "../components/LoadingBox";
+import Rating from '../components/Rating'
 export default function ProductScreen(props) {
-  const productDetails = useSelector((state)=>state.productDetails)
+  const productDetails = useSelector((state) => state.productDetails);
+  const { product, loading, error } = productDetails;
 
   const productId = props.match.params.id;
   const dispatch = useDispatch();
@@ -11,8 +15,43 @@ export default function ProductScreen(props) {
   }, [dispatch, productId]);
   return (
     <div>
-      <div>به نام ابر برنامه نویس عالم</div>
-      <div>{productId}</div>
+      {loading ? (
+        <LoadingBox></LoadingBox>
+      ) : error ? (
+        <MessageBox></MessageBox>
+      ) : (
+        <div>
+          <div className="row top">
+            <div className="col-2">
+              <img className="large" src={product.image} alt={product.name} />
+            </div>
+            <div className="col-1">
+              <ul>
+                <li>
+                  <h1>{product.name}</h1>
+                </li>
+                <li>
+                  <Rating
+                    rating={product.rating}
+                    numReviews={product.numReviews}
+                  ></Rating>
+                </li>
+                <li>
+                  Pice : $ 
+                  {product.price}
+                </li>
+                <li>
+                  Description : 
+                  <p>
+                    {product.description}
+                    </p> 
+                </li>
+              </ul>
+            </div>
+            <div className="col-1">sdf</div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }