master
mahdi 3 years ago
parent 0668f84b04
commit 9db335640a
  1. 28
      src/components/bookDesign/BookDesign.js
  2. 9
      src/components/counterDesign/CounterDesign.js
  3. 9
      src/components/productTags/ProductTags.js
  4. 4
      tailwind.config.js

@ -4,7 +4,7 @@ import React from "react";
import book from "../../assets/images/book.svg"; import book from "../../assets/images/book.svg";
import bookCover from "../../assets/images/book-white-cover.svg"; import bookCover from "../../assets/images/book-white-cover.svg";
export const BookDesign = () => { export const BookDesign = ({ bookBackCoverBg }) => {
return ( return (
<section className="w-11/12 mx-auto p-4 bg-gray-300 rounded-md shadow-md my-8"> <section className="w-11/12 mx-auto p-4 bg-gray-300 rounded-md shadow-md my-8">
{/* title holder */} {/* title holder */}
@ -13,6 +13,15 @@ export const BookDesign = () => {
طراحی کتاب طراحی کتاب
</button> </button>
</div> </div>
<div className="my-4">
<p className="leading-10">
نام این کامپوننت
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
bookDesign
</span>
است.
</p>
</div>
{/* Book Ui Design */} {/* Book Ui Design */}
<section className="my-24 mx-24 flex flex-wrap justify-center"> <section className="my-24 mx-24 flex flex-wrap justify-center">
<div className="flex relative"> <div className="flex relative">
@ -22,10 +31,25 @@ export const BookDesign = () => {
className="rounded-md z-40 transform -translate-x-3 w-full sm:w-72 h-full" className="rounded-md z-40 transform -translate-x-3 w-full sm:w-72 h-full"
/> />
<img src={bookCover} alt="" className="z-30 h-full" /> <img src={bookCover} alt="" className="z-30 h-full" />
<div className="bg-greenBookBg w-7 rounded-l-md transform translate-x-4 z-10"></div> <div
className={`bg-greenBookBg w-7 rounded-l-md transform translate-x-4 z-10 ${bookBackCoverBg} `}
></div>
<div className="w-10/12 absolute left-7 -bottom-0 h-11 shadow-2xl shadow-black"></div> <div className="w-10/12 absolute left-7 -bottom-0 h-11 shadow-2xl shadow-black"></div>
</div> </div>
</section> </section>
</section> </section>
); );
}; };
export default BookDesign;
// color classes that i defined in tailwind.config.js and we can use for background color:
// ----> bg-greenBookBg
// ----> bg-darkGreenBookBg
// ----> bg-lightBlueBookBg
// ----> bg-lightSkyBlueBookBg
// ----> bg-darkNavyBlueBookBg
BookDesign.defaultProps = {
bookBackCoverBg: "bg-greenBookBg",
};

@ -23,6 +23,15 @@ const CounterDesign = ({
طراحی کانتر طراحی کانتر
</h2> </h2>
</div> </div>
<div className="my-4">
<p className="leading-10">
نام این کامپوننت
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
counterDesign
</span>
است.
</p>
</div>
<div className="flex-col items-center justify-center"> <div className="flex-col items-center justify-center">
{likeBtn && ( {likeBtn && (
<div className="flex items-center"> <div className="flex items-center">

@ -44,6 +44,15 @@ const ProductTags = ({
تگ محصولات تگ محصولات
</h2> </h2>
</div> </div>
<div className="my-4">
<p className="leading-10">
نام این کامپوننت
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
productTags
</span>
است.
</p>
</div>
{/* product UI Design */} {/* product UI Design */}
<div className="flex flex-wrap items-center justify-around "> <div className="flex flex-wrap items-center justify-around ">
<div className="mt-2 flex flex-wrap w-1/5 "> <div className="mt-2 flex flex-wrap w-1/5 ">

@ -42,6 +42,10 @@ module.exports = {
lightGreenBgColor: "#5DCE0611", //opacity should be 3 % instead of 100% lightGreenBgColor: "#5DCE0611", //opacity should be 3 % instead of 100%
lightPurpleBgColor: "#A680FF11", //opacity should be 8 % instead of 100% lightPurpleBgColor: "#A680FF11", //opacity should be 8 % instead of 100%
greenBookBg: "#5DA041", greenBookBg: "#5DA041",
darkGreenBookBg: "#293636",
lightBlueBookBg: "#9BBCCC",
lightSkyBlueBookBg: "#B2D6EE",
darkNavyBlueBookBg: "#0E0E0E",
}), }),
borderColor: (theme) => ({ borderColor: (theme) => ({
...theme("colors"), ...theme("colors"),

Loading…
Cancel
Save