Product Item Styled

temp
Pedram Keshavarzi 3 years ago
parent 22005d826a
commit a07c349a38
  1. 31
      src/components/Product/index.js
  2. 4
      src/views/Products/index.js
  3. 17
      src/views/Products/layouts/Main.js
  4. 2
      tailwind.config.js

@ -39,14 +39,16 @@ const ProductDesign = ({
productName,
productGrade,
productPrice,
productImg
productImg,
writeGHEIMAT,
numberOfRegards
}) => {
const [isHovering, setIsHovering] = useState(false);
return (
<div className="flex flex-wrap sm:flex-nowrap justify-around w-48">
<div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
<div className="flex flex-wrap sm:flex-nowrap justify-around w-48 m-3">
<div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4">
<div
className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
>
{/* product image */}
<div className="w-full relative">
@ -71,7 +73,7 @@ const ProductDesign = ({
)}
</div>
{/* img */}
<div className="w-full h-48 flex bg-gray-200 p-0 justify-center rounded-lg">
<div className="w-full h-48 flex bg-grayF4 p-0 justify-center rounded-lg">
{verticalImg && (
<img
src={productImg}
@ -130,7 +132,7 @@ const ProductDesign = ({
<div className="px-2">
<div className="mt-4">
<h2
className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
className={`leading-4 text-xs ${productTitleColor} ${productTitleAlignment}`}
>
{productName}
</h2>
@ -143,8 +145,8 @@ const ProductDesign = ({
</p>
)}
{productCat && (
<span className={`text-xs font-light ${productCatTextColor}`}>
{productGrade}
<span className={`text-sm font-light ${productCatTextColor}`}>
{productCat}
</span>
)}
</div>
@ -152,8 +154,8 @@ const ProductDesign = ({
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
<span className="text-sm-1 text-productContent font-bold mr-2">
بر اساس {numberOfRegards} بررسی
</span>
</div>
)}
@ -168,7 +170,7 @@ const ProductDesign = ({
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{writeGHEIMAT && <span className="text-xs text-borderColor ml-2">قیمت</span>}
{/* price with line on it */}
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
@ -176,8 +178,8 @@ const ProductDesign = ({
</p>
)}
</div>
<p className="text-sm text-productPrice font-semibold inline">
{productPrice}<span>تومان</span>
<p className="text-sm text-productPrice font-semibold inline text-blue5F">
{productPrice} <span>تومان</span>
</p>
</div>
{/* add to cart */}
@ -261,5 +263,6 @@ ProductDesign.defaultProps = {
productTitleAlignment: "text-justify",
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
priceDirection: "flex-row",
productImg: book
productImg: book,
writeGHEIMAT: false
};

@ -163,11 +163,11 @@ export const Products = ({
</>
) : (
<div
className={`w-full flex flex-row gap-10 px-5`}
className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3`}
// style={{ height: 1500 }}
>
<Sidebar />
<Main gradeFilterBooks={gradeFilterBooks}/>
<Main />
</div>
)}
</div>

@ -44,8 +44,8 @@ export const Main = ({ isMobile,
title: 'محبوب ترین'
},
];
return <div className="flex flex-col w-3/4 p-4 ">
<div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-2.5 justify-center text-blue52">
return <div className="flex flex-col w-3/4 p-4">
<div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52">
<div className='flex text-xs items-center mx-4'>
<img src={filterIcon} />
<span>
@ -60,8 +60,8 @@ export const Main = ({ isMobile,
}
</ul>
</div>
<div>
<div className="w-full flex flex-row flex-wrap mt-3">
<div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-center">
{selectedGrade
? gradeFilterBooks?.map((product, index) => (
<Product
@ -80,14 +80,17 @@ export const Main = ({ isMobile,
product={product}
index={Number(index)}
productName={`کتاب ${product?.name}`}
productGrade={`پایه ${grades[product?.gradeId]}`}
productPrice={1399}
productCat={`پایه ${grades[product?.gradeId]}`}
productPrice={100000}
productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards={160}
productTitleColor='text-blue5F'
productCatTextColor='text-blueC0'
/>
</Link>
))}
</div>
</div>
</div>;
};

@ -29,6 +29,7 @@ module.exports = {
grayE3: "#E3E3E3",
grayEE: "#EEEEEE",
grayF9: "#F9F9F9",
grayF4: "#EBF0F4",
}),
textColor: (theme) => ({
...theme("colors"),
@ -77,6 +78,7 @@ module.exports = {
'5xl': '3rem',
'6xl': '4rem',
'7xl': '5rem',
'sm-1': '0.5rem'
},
extend: {
borderRadius: {

Loading…
Cancel
Save