master
mahdi 3 years ago
parent 3c626757c9
commit a6fd7115ab
  1. 4
      src/App.js
  2. 104
      src/components/productDesign/ProductDesign.js
  3. 3
      tailwind.config.js

@ -15,7 +15,7 @@ import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1";
function App() {
return (
<div className="App">
{/* <ProductDesign /> */}
<ProductDesign />
{/* <BookDesign /> */}
{/* <ButtonDesign /> */}
{/* <ProductTags /> */}
@ -26,7 +26,7 @@ function App() {
{/* <BlogDesign4 /> */}
{/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */}
<HeaderDesign1 />
{/* <HeaderDesign1 /> */}
</div>
);
}

@ -22,6 +22,11 @@ const ProductDesign = ({
productTags,
priceDirection,
productTitleAlignment,
priceHolder,
productHolderBorder,
productHolderBorderColor,
productTitleColor,
productCat,
}) => {
return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -66,7 +71,9 @@ const ProductDesign = ({
{/* product UI Design */}
<div className="flex flex-wrap sm:flex-nowrap justify-around">
<div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
<div className="w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm border-2 border-productDesignBorderColor p-2 my-3">
<div
className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
>
<div className="w-full relative">
{discountPricePercent && (
<div className="bg-discountPriceBg absolute left-2 top-4 rounded-md px-2 py-1">
@ -101,16 +108,21 @@ const ProductDesign = ({
</div>
<div className="mt-4">
<h2
className={`text-productTitle leading-4 text-base 2xl:text-lg ${productTitleAlignment}`}
className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="text-justify text-productContent mt-2 text-sm leading-6">
<p className="text-justify text-productContent mt-2 text-xs leading-6">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
{productCat && (
<span className="text-darkCrimsonTextColor text-xs font-light">
پایه سوم
</span>
)}
</div>
{star && (
<div className="flex items-center mt-2">
@ -120,36 +132,38 @@ const ProductDesign = ({
</span>
</div>
)}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
{priceHolder && (
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="text-sm text-productPrice font-semibold inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="text-sm text-productPrice font-semibold inline">
145.000<span>تومان</span>
</p>
اضافه کردن به سبد خرید
</button>
</div>
{/* add to cart */}
<button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
)}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
@ -163,6 +177,9 @@ const ProductDesign = ({
</button>
</div>
)}
<div className="bg-rangeBgColor h-3 w-full rounded mt-4">
<div className="bg-rangeFillBgColor h-3 w-44 rounded"></div>
</div>
</div>
</div>
</div>
@ -172,15 +189,26 @@ const ProductDesign = ({
export default ProductDesign;
// text colors i used for product title:
// text-darkCrimsonTextColor
// text-productTitle
ProductDesign.defaultProps = {
colors: true,
likeBtn: true,
discount: true,
discountPricePercent: true,
discountPrice: true,
productContent: true,
star: true,
productTags: true,
colors: false,
likeBtn: false,
discount: false,
discountPricePercent: false,
discountPrice: false,
productContent: false,
star: false,
productTags: false,
priceHolder: false,
productCat: true,
productTitleColor: "text-darkCrimsonTextColor",
productHolderBorder: "border-0",
productHolderBorderColor: "border-grayBorderColor",
priceDirection: "flex-row",
productTitleAlignment: "text-justify",
};
// border-2 border-productDesignBorderColor

@ -26,6 +26,7 @@ module.exports = {
lightBlueTextColor: "#06BACE",
darkBlueTextColor: "#0615CE",
darkRedTextColor: "#CE3B06",
darkCrimsonTextColor: "#05335F",
}),
backgroundColor: (theme) => ({
...theme("colors"),
@ -48,6 +49,8 @@ module.exports = {
lightSkyBlueBookBg: "#B2D6EE",
darkNavyBlueBookBg: "#0E0E0E",
darkCrimsonBgColor: "#132F52",
rangeBgColor: "#D3E9FF",
rangeFillBgColor: "#68A8E6",
}),
borderColor: (theme) => ({
...theme("colors"),

Loading…
Cancel
Save