You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

55 lines
1.8 KiB

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 = ({ bookBackCoverBg }) => {
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>
<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 */}
<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 ${bookBackCoverBg} `}
></div>
<div className="w-10/12 absolute left-7 -bottom-0 h-11 shadow-2xl shadow-black"></div>
</div>
</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",
};