mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi 3 years ago
parent f399157695
commit 253a2ac186
5 changed files with 98 additions and 176 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/App.js
  2. 40
      src/components/buttonDesign/ButtonDesign.js
  3. 190
      src/components/productTags/ProductTags.js
  4. 3
      src/components/productTags/ProductTags.scss
  5. 31
      tailwind.config.js

2
src/App.js
Unescape View File

@ -7,7 +7,7 @@ function App() {
return ( return (
<div className="App"> <div className="App">
{/* <ProductDesign /> */} {/* <ProductDesign /> */}
{/* <ButtonDesign /> */} <ButtonDesign />
<ProductTags /> <ProductTags />
</div> </div>
); );

40
src/components/buttonDesign/ButtonDesign.js
Unescape View File

@ -32,81 +32,81 @@ const ButtonDesign = () => {
{/* Button UI Design */} {/* Button UI Design */}
<div className="flex flex-wrap justify-around items-center"> <div className="flex flex-wrap justify-around items-center">
<div> <div>
<button className="bg-moreInfoButtonBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-moreInfoButtonBorderColor my-2 "> <button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-lightBlueBorderColor my-2 ">
اطلاعات بیشتر اطلاعات بیشتر
</button> </button>
<br /> <br />
<button className="bg-moreInfoButtonBg text-white text-sm md:text-base rounded px-6 py-2 my-2"> <button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
اطلاعات بیشتر اطلاعات بیشتر
</button> </button>
<br /> <br />
<button className="bg-moreInfoButtonBg text-white text-sm md:text-base rounded-full px-6 py-2 my-2"> <button className="bg-darkGreenBg text-white text-sm md:text-base rounded-full px-6 py-2 my-2">
اطلاعات بیشتر اطلاعات بیشتر
</button> </button>
<br /> <br />
<button className="bg-moreInfoButtonBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-moreInfoButtonBorderColor my-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"> <button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-lightBlueBorderColor my-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300">
Hover ME Hover ME
</button> </button>
<br /> <br />
<button className="flex items-center bg-moreInfoButtonBg text-white text-sm md:text-base rounded px-6 py-2 my-2"> <button className="flex items-center bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
اطلاعات بیشتر اطلاعات بیشتر
<img src={whiteLeftArrow} alt="" className="w-4 mr-1" /> <img src={whiteLeftArrow} alt="" className="w-4 mr-1" />
</button> </button>
</div> </div>
<div> <div>
<button className="border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-sm md:text-base rounded px-6 py-2 my-2"> <button className="border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded px-6 py-2 my-2">
اطلاعات بیشتر اطلاعات بیشتر
</button> </button>
<br /> <br />
<button className="border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-sm md:text-base rounded-full px-6 py-2 my-2"> <button className="border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
اطلاعات بیشتر اطلاعات بیشتر
</button> </button>
<br /> <br />
<button className="flex items-center border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-sm md:text-base rounded-full px-6 py-2 my-2"> <button className="flex items-center border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
اطلاعات بیشتر اطلاعات بیشتر
<img src={greenLeftArrow} alt="" className="w-4 mr-1" /> <img src={greenLeftArrow} alt="" className="w-4 mr-1" />
</button> </button>
<button className="flex items-center text-moreInfoButtonTextColor text-sm md:text-base rounded-full px-6 py-2 my-2"> <button className="flex items-center text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
اطلاعات بیشتر اطلاعات بیشتر
<img src={greenLeftArrow} alt="" className="w-4 mr-1" /> <img src={greenLeftArrow} alt="" className="w-4 mr-1" />
</button> </button>
<button className="flex items-center border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-sm md:text-base rounded-full px-6 py-2 my-2"> <button className="flex items-center border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
اطلاعات بیشتر اطلاعات بیشتر
<span className="bg-moreInfoButtonBg rounded-full p-2 mr-2"> <span className="bg-darkGreenBg rounded-full p-2 mr-2">
<img src={whiteLeftArrow} alt="" className="w-4" /> <img src={whiteLeftArrow} alt="" className="w-4" />
</span> </span>
</button> </button>
</div> </div>
<div> <div>
<button className="bg-cancleButtonBg text-cancleButtonTextColor text-sm md:text-base rounded px-6 py-2 my-2"> <button className="bg-midGrayBgColor text-cancleButtonTextColor text-sm md:text-base rounded px-6 py-2 my-2">
لغو کردن لغو کردن
</button> </button>
<br /> <br />
<button className="bg-cancleButtonBg p-4 rounded-md"> <button className="bg-midGrayBgColor p-4 rounded-md">
<img src={blackRightArrow} alt="" className="w-4" /> <img src={blackRightArrow} alt="" className="w-4" />
</button> </button>
<button className="bg-cancleButtonBg p-4 rounded-md mr-2"> <button className="bg-midGrayBgColor p-4 rounded-md mr-2">
<img src={blackLeftArrow} alt="" className="w-4" /> <img src={blackLeftArrow} alt="" className="w-4" />
</button> </button>
<br /> <br />
<button className="bg-moreInfoButtonBg p-4 rounded-md my-2"> <button className="bg-darkGreenBg p-4 rounded-md my-2">
<img src={whiteRightArrow} alt="" className="w-4" /> <img src={whiteRightArrow} alt="" className="w-4" />
</button> </button>
<button className="bg-moreInfoButtonBg p-4 rounded-md mr-2"> <button className="bg-darkGreenBg p-4 rounded-md mr-2">
<img src={whiteLeftArrow} alt="" className="w-4" /> <img src={whiteLeftArrow} alt="" className="w-4" />
</button> </button>
<br /> <br />
<button className="bg-cancleButtonBg p-4 rounded-md"> <button className="bg-midGrayBgColor p-4 rounded-md">
<img src={blackUpwardArrow} alt="" className="w-4" /> <img src={blackUpwardArrow} alt="" className="w-4" />
</button> </button>
<button className="bg-cancleButtonBg p-4 rounded-md mr-2"> <button className="bg-midGrayBgColor p-4 rounded-md mr-2">
<img src={blackDownwardArrow} alt="" className="w-4" /> <img src={blackDownwardArrow} alt="" className="w-4" />
</button> </button>
<br /> <br />
<button className="bg-moreInfoButtonBg p-4 rounded-full my-2"> <button className="bg-darkGreenBg p-4 rounded-full my-2">
<img src={whiteUpwardArrow} alt="" className="w-4 h-4" /> <img src={whiteUpwardArrow} alt="" className="w-4 h-4" />
</button> </button>
<button className="bg-moreInfoButtonBg p-4 rounded-full mr-2"> <button className="bg-darkGreenBg p-4 rounded-full mr-2">
<img src={whiteDownwardArrow} alt="" className="w-4 h-4" /> <img src={whiteDownwardArrow} alt="" className="w-4 h-4" />
</button> </button>
</div> </div>

190
src/components/productTags/ProductTags.js
Unescape View File

@ -1,10 +1,18 @@
import React from "react"; import React from "react";
import "./ProductTags.scss";
import blackCancleIcon from "../../assets/icons/black-cancle-icon.svg"; import blackCancleIcon from "../../assets/icons/black-cancle-icon.svg";
import blackDeliveryIcon from "../../assets/icons/black-delivery-icon.svg"; import blackDeliveryIcon from "../../assets/icons/black-delivery-icon.svg";
import blackRightIcon from "../../assets/icons/black-right-icon.svg"; import blackRightIcon from "../../assets/icons/black-right-icon.svg";
const ProductTags = ({ tagtitlecolor }) => { const ProductTags = ({
tagtitlecolor,
tagBgColor,
tagBorderColor,
deliveryIcon,
rightIcon,
cancleIcon,
}) => {
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">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
@ -17,150 +25,18 @@ const ProductTags = ({ tagtitlecolor }) => {
{/* 1 */} {/* 1 */}
<div className="mt-2 flex flex-wrap w-1/5 "> <div className="mt-2 flex flex-wrap w-1/5 ">
<button <button
className={`rounded border border-productTagBorderColor1 m-1 px-4 py-1 text-xs ${tagtitlecolor}`} className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
> >
ارسال رایگان {deliveryIcon && (
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
برچسب های دیگر
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
امتحان سخت
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
امتحان آسان
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
آزمون
</button>
</div>
{/* 2 */}
<div className="mt-2 flex flex-wrap w-1/5 ">
<button className=" rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
ارسال رایگان
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
برچسب های دیگر
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
امتحان سخت
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
</button>
<button className="rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
امتحان آسان
</button>
<button className="rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
آزمون
</button>
</div>
{/* 3 */}
<div className="mt-2 flex flex-wrap w-1/5 ">
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
ارسال رایگان
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
برچسب های دیگر
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
امتحان سخت
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
امتحان آسان
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
آزمون
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
</div>
{/* 4 */}
<div className="mt-2 flex flex-wrap w-1/5 ">
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
ارسال رایگان
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
برچسب های دیگر
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
امتحان سخت
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
امتحان آسان
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
آزمون
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
</div>
{/* 5 */}
<div className="mt-2 flex flex-wrap w-1/5 ">
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
<img src={blackDeliveryIcon} alt="" className="ml-1 w-3" /> <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
ارسال رایگان )}
<img src={blackCancleIcon} alt="" className="mr-2 w-2" /> {rightIcon && (
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
<img src={blackRightIcon} alt="" className="ml-1 w-3" /> <img src={blackRightIcon} alt="" className="ml-1 w-3" />
)}
ارسال رایگان ارسال رایگان
{cancleIcon && (
<img src={blackCancleIcon} alt="" className="mr-2 w-2" /> <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button> )}
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
برچسب های دیگر
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
امتحان سخت
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
امتحان آسان
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
آزمون
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button> </button>
</div> </div>
</div> </div>
@ -170,6 +46,38 @@ const ProductTags = ({ tagtitlecolor }) => {
export default ProductTags; export default ProductTags;
// color classes that i defined in tailwind.config.js and we can use for text color:
// 1 ----> text-lightBlueTextColor
// 2 ----> text-grayTextColor
// 3 ----> text-lightOrangeTextColor
// 4 ----> text-lightYellowTextColor
// 4 ----> text-lightGreenTextColor
// 4 ----> text-lightPurpleTextColor
// 5 ----> text-darkBlueTextColor
// color classes that i defined in tailwind.config.js and we can use for background color:
// 1 ----> bg-productTagBg
// 2 ----> bg-lightOrangeBgColor
// 3 ----> bg-lightYellowBgColor
// 4 ----> bg-lightBlueBgColor
// 4 ----> bg-lightGreenBgColor
// 4 ----> bg-lightPurpleBgColor
// color classes that i defined in tailwind.config.js and we can use for border color:
// 1 ----> border-lightBlueBorderColor
// 2 ----> border-grayBorderColor
// 3 ----> border-lightOrangeBorderColor
// 4 ----> border-lightYellowBorderColor
// 5 ----> border-lightGreenBorderColor
// 5 ----> border-lightPurpleBorderColor
// 6 ----> border-darkBlueBorderColor
ProductTags.defaultProps = { ProductTags.defaultProps = {
tagtitlecolor: "text-red-400", tagtitlecolor: "text-lightPurpleTextColor",
tagBgColor: "bg-lightPurpleBgColor",
tagBorderColor: "border-lightPurpleBorderColor",
// for icons
deliveryIcon: true,
rightIcon: false,
cancleIcon: true,
}; };

3
src/components/productTags/ProductTags.scss
Unescape View File

@ -0,0 +1,3 @@
.product-tag-button {
@apply flex items-center rounded border-2 m-1 px-4 py-1 text-xs;
}

31
tailwind.config.js
Unescape View File

@ -17,9 +17,13 @@ module.exports = {
selectColor2: "#89ECFF", selectColor2: "#89ECFF",
selectColor3: "#FC5353", selectColor3: "#FC5353",
selectColor4: "#FCF653", selectColor4: "#FCF653",
// used in ButtonDesign Component lightBlueTextColor: "#06BACE",
moreInfoButtonTextColor: "#06BACE", grayTextColor: "#646464",
cancleButtonTextColor: "#646464", lightOrangeTextColor: "#F7B605",
lightYellowTextColor: "#C8EE49",
lightGreenTextColor: "#5DCE06",
lightPurpleTextColor: "#A680FF",
darkBlueTextColor: "#0615CE",
}), }),
backgroundColor: (theme) => ({ backgroundColor: (theme) => ({
...theme("colors"), ...theme("colors"),
@ -29,18 +33,25 @@ module.exports = {
discountPriceBg: "#F0FFF1", discountPriceBg: "#F0FFF1",
counterBg: "#66B1EB", counterBg: "#66B1EB",
incrementDecrementBg: "#2E7AB5", incrementDecrementBg: "#2E7AB5",
// used in ButtonDesign Component darkGreenBg: "#038A99",
moreInfoButtonBg: "#038A99", midGrayBgColor: "#DBDBDB",
cancleButtonBg: "#DBDBDB", lightOrangeBgColor: "#F7B605",
lightYellowBgColor: "#CEFE2D", //opacity should be 10 % instead of 100%
lightBlueBgColor: "#8891FC", //opacity should be 10 % instead of 100%
lightGreenBgColor: "#5DCE06", //opacity should be 3 % instead of 100%
lightPurpleBgColor: "#A680FF", //opacity should be 8 % instead of 100%
}), }),
borderColor: (theme) => ({ borderColor: (theme) => ({
...theme("colors"), ...theme("colors"),
// used in ProductDesign Component // used in ProductDesign Component
productDesignBorderColor: "#F3F3F3", productDesignBorderColor: "#F3F3F3",
// used in ButtonDesign Component lightBlueBorderColor: "#06BACE",
moreInfoButtonBorderColor: "#06BACE", grayBorderColor: "#C3C3C3",
// used in ProductTags Component lightOrangeBorderColor: "#F7B605",
productTagBorderColor1: "#C3C3C3", lightYellowBorderColor: "#CFFF2D",
lightGreenBorderColor: "#5DCE06",
lightPurpleBorderColor: "#A680FF",
darkBlueBorderColor: "#0615CE",
}), }),
}, },
plugins: [], plugins: [],

Write Preview
Loading…
Cancel
Save