Commit 815e9c39 authored by Rasoul Madani's avatar Rasoul Madani
Browse files

فیلم 17

parent 61dd51a1
......@@ -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;
......
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>
);
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment