From 0668f84b045ec2a5523fb7df8b926397c711b637 Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Sat, 25 Dec 2021 09:24:49 +0330
Subject: [PATCH] book design component added

---
 src/App.js                                    |   8 +-
 .../{Path2.svg => book-white-cover.svg}       |   0
 src/assets/images/{o1.svg => book.svg}        |   0
 src/components/bookDesign/BookDesign.js       |  31 ++++
 src/components/bookDesign/BookDesign.scss     |   0
 src/components/buttonDesign/ButtonDesign.js   | 170 +++++++++---------
 tailwind.config.js                            |   1 +
 7 files changed, 121 insertions(+), 89 deletions(-)
 rename src/assets/images/{Path2.svg => book-white-cover.svg} (100%)
 rename src/assets/images/{o1.svg => book.svg} (100%)
 create mode 100644 src/components/bookDesign/BookDesign.js
 create mode 100644 src/components/bookDesign/BookDesign.scss

diff --git a/src/App.js b/src/App.js
index 89550ac..276a9e7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,13 +3,15 @@ import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 import ProductDesign from "./components/productDesign/ProductDesign";
 import ProductTags from "./components/productTags/ProductTags";
 import CounterDesign from "./components/counterDesign/CounterDesign";
+import { BookDesign } from "./components/bookDesign/BookDesign";
 
 function App() {
   return (
     <div className="App">
-      {/* <ProductDesign /> */}
-      {/* <ButtonDesign /> */}
-      {/* <ProductTags /> */}
+      <ProductDesign />
+      <BookDesign />
+      <ButtonDesign />
+      <ProductTags />
       <CounterDesign />
     </div>
   );
diff --git a/src/assets/images/Path2.svg b/src/assets/images/book-white-cover.svg
similarity index 100%
rename from src/assets/images/Path2.svg
rename to src/assets/images/book-white-cover.svg
diff --git a/src/assets/images/o1.svg b/src/assets/images/book.svg
similarity index 100%
rename from src/assets/images/o1.svg
rename to src/assets/images/book.svg
diff --git a/src/components/bookDesign/BookDesign.js b/src/components/bookDesign/BookDesign.js
new file mode 100644
index 0000000..35eb2ff
--- /dev/null
+++ b/src/components/bookDesign/BookDesign.js
@@ -0,0 +1,31 @@
+import React from "react";
+// import "./BookDesign.scss";
+
+import book from "../../assets/images/book.svg";
+import bookCover from "../../assets/images/book-white-cover.svg";
+
+export const BookDesign = () => {
+  return (
+    <section className="w-11/12 mx-auto p-4 bg-gray-300 rounded-md shadow-md my-8">
+      {/* title holder */}
+      <div className="mb-6">
+        <button className="text-lg text-productTitle text-base bg-white p-1 rounded shadow">
+          طراحی کتاب
+        </button>
+      </div>
+      {/* Book Ui Design */}
+      <section className="my-24 mx-24 flex flex-wrap justify-center">
+        <div className="flex relative">
+          <img
+            src={book}
+            alt=""
+            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" />
+          <div className="bg-greenBookBg w-7 rounded-l-md transform translate-x-4 z-10"></div>
+          <div className="w-10/12 absolute left-7 -bottom-0 h-11 shadow-2xl shadow-black"></div>
+        </div>
+      </section>
+    </section>
+  );
+};
diff --git a/src/components/bookDesign/BookDesign.scss b/src/components/bookDesign/BookDesign.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/buttonDesign/ButtonDesign.js b/src/components/buttonDesign/ButtonDesign.js
index ea53302..affdd57 100644
--- a/src/components/buttonDesign/ButtonDesign.js
+++ b/src/components/buttonDesign/ButtonDesign.js
@@ -38,93 +38,91 @@ const ButtonDesign = ({
   circleArrow,
 }) => {
   return (
-    <div>
-      <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
-        <div className="flex items-center justify-between">
-          <h2 className="text-lg text-black">طراحی دکمه های سایت</h2>
+    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg text-black">طراحی دکمه های سایت</h2>
+      </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">
+            buttonDesign
+          </span>
+          است.
+        </p>
+      </div>
+      {/* Button UI Design */}
+      <div className="flex flex-wrap justify-around items-center">
+        <div>
+          <button
+            className={`flex items-center  text-sm md:text-base ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
+          >
+            اطلاعات بیشتر
+            {leftArrowWhite && (
+              <img
+                src={whiteLeftArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {rightArrowWhite && (
+              <img
+                src={whiteRightArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {upwardArrowWhite && (
+              <img
+                src={whiteUpwardArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {downwardArrowWhite && (
+              <img
+                src={whiteDownwardArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {leftArrowBlack && (
+              <img
+                src={blackLeftArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {rightArrowBlack && (
+              <img
+                src={blackRightArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {upwardArrowBlack && (
+              <img
+                src={blackUpwardArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {downwardArrowBlack && (
+              <img
+                src={blackDownwardArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {circleArrow && (
+              <span className={`rounded-full p-2 mr-2 ${circleArrowBgClr} `}>
+                <img src={whiteLeftArrow} alt="" className="w-4" />
+              </span>
+            )}
+          </button>
         </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">
-              buttonDesign
-            </span>
-            است.
-          </p>
-        </div>
-        {/* Button UI Design */}
-        <div className="flex flex-wrap justify-around items-center">
-          <div>
-            <button
-              className={`flex items-center  text-sm md:text-base ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
-            >
-              اطلاعات بیشتر
-              {leftArrowWhite && (
-                <img
-                  src={whiteLeftArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {rightArrowWhite && (
-                <img
-                  src={whiteRightArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {upwardArrowWhite && (
-                <img
-                  src={whiteUpwardArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {downwardArrowWhite && (
-                <img
-                  src={whiteDownwardArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {leftArrowBlack && (
-                <img
-                  src={blackLeftArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {rightArrowBlack && (
-                <img
-                  src={blackRightArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {upwardArrowBlack && (
-                <img
-                  src={blackUpwardArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {downwardArrowBlack && (
-                <img
-                  src={blackDownwardArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {circleArrow && (
-                <span className={`rounded-full p-2 mr-2 ${circleArrowBgClr} `}>
-                  <img src={whiteLeftArrow} alt="" className="w-4" />
-                </span>
-              )}
-            </button>
-          </div>
-        </div>
-      </section>
-    </div>
+      </div>
+    </section>
   );
 };
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 6c21e0e..d7d4207 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -41,6 +41,7 @@ module.exports = {
       lightBlueBgColor: "#8891FC11", //opacity should be 10 % instead of 100%
       lightGreenBgColor: "#5DCE0611", //opacity should be 3 % instead of 100%
       lightPurpleBgColor: "#A680FF11", //opacity should be 8 % instead of 100%
+      greenBookBg: "#5DA041",
     }),
     borderColor: (theme) => ({
       ...theme("colors"),