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() { function App() {
return ( return (
<div className="App"> <div className="App">
{/* <ProductDesign /> */} <ProductDesign />
{/* <BookDesign /> */} {/* <BookDesign /> */}
{/* <ButtonDesign /> */} {/* <ButtonDesign /> */}
{/* <ProductTags /> */} {/* <ProductTags /> */}
@ -26,7 +26,7 @@ function App() {
{/* <BlogDesign4 /> */} {/* <BlogDesign4 /> */}
{/* <BlogDesign5 /> */} {/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */} {/* <BlogDesign6 /> */}
<HeaderDesign1 /> {/* <HeaderDesign1 /> */}
</div> </div>
); );
} }

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

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

Loading…
Cancel
Save