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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/App.js
  2. 40
      src/components/buttonDesign/ButtonDesign.js
  3. 198
      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 (
<div className="App">
{/* <ProductDesign /> */}
{/* <ButtonDesign /> */}
<ButtonDesign />
<ProductTags />
</div>
);

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

@ -32,81 +32,81 @@ const ButtonDesign = () => {
{/* Button UI Design */}
<div className="flex flex-wrap justify-around items-center">
<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>
<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>
<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>
<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
</button>
<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" />
</button>
</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>
<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>
<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" />
</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" />
</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" />
</span>
</button>
</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>
<br />
<button className="bg-cancleButtonBg p-4 rounded-md">
<button className="bg-midGrayBgColor p-4 rounded-md">
<img src={blackRightArrow} alt="" className="w-4" />
</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" />
</button>
<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" />
</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" />
</button>
<br />
<button className="bg-cancleButtonBg p-4 rounded-md">
<button className="bg-midGrayBgColor p-4 rounded-md">
<img src={blackUpwardArrow} alt="" className="w-4" />
</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" />
</button>
<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" />
</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" />
</button>
</div>

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

@ -1,10 +1,18 @@
import React from "react";
import "./ProductTags.scss";
import blackCancleIcon from "../../assets/icons/black-cancle-icon.svg";
import blackDeliveryIcon from "../../assets/icons/black-delivery-icon.svg";
import blackRightIcon from "../../assets/icons/black-right-icon.svg";
const ProductTags = ({ tagtitlecolor }) => {
const ProductTags = ({
tagtitlecolor,
tagBgColor,
tagBorderColor,
deliveryIcon,
rightIcon,
cancleIcon,
}) => {
return (
<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">
@ -15,152 +23,20 @@ const ProductTags = ({ tagtitlecolor }) => {
{/* product UI Design */}
<div className="flex flex-wrap items-center justify-around ">
{/* 1 */}
<div className="mt-2 flex flex-wrap w-1/5 ">
<div className="mt-2 flex flex-wrap w-1/5 ">
<button
className={`rounded border border-productTagBorderColor1 m-1 px-4 py-1 text-xs ${tagtitlecolor}`}
className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
>
{deliveryIcon && (
<img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
)}
{rightIcon && (
<img src={blackRightIcon} alt="" className="ml-1 w-3" />
)}
ارسال رایگان
</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={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={blackRightIcon} alt="" className="ml-1 w-3" />
ارسال رایگان
<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" />
{cancleIcon && (
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
)}
</button>
</div>
</div>
@ -170,6 +46,38 @@ const ProductTags = ({ tagtitlecolor }) => {
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 = {
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",
selectColor3: "#FC5353",
selectColor4: "#FCF653",
// used in ButtonDesign Component
moreInfoButtonTextColor: "#06BACE",
cancleButtonTextColor: "#646464",
lightBlueTextColor: "#06BACE",
grayTextColor: "#646464",
lightOrangeTextColor: "#F7B605",
lightYellowTextColor: "#C8EE49",
lightGreenTextColor: "#5DCE06",
lightPurpleTextColor: "#A680FF",
darkBlueTextColor: "#0615CE",
}),
backgroundColor: (theme) => ({
...theme("colors"),
@ -29,18 +33,25 @@ module.exports = {
discountPriceBg: "#F0FFF1",
counterBg: "#66B1EB",
incrementDecrementBg: "#2E7AB5",
// used in ButtonDesign Component
moreInfoButtonBg: "#038A99",
cancleButtonBg: "#DBDBDB",
darkGreenBg: "#038A99",
midGrayBgColor: "#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) => ({
...theme("colors"),
// used in ProductDesign Component
productDesignBorderColor: "#F3F3F3",
// used in ButtonDesign Component
moreInfoButtonBorderColor: "#06BACE",
// used in ProductTags Component
productTagBorderColor1: "#C3C3C3",
lightBlueBorderColor: "#06BACE",
grayBorderColor: "#C3C3C3",
lightOrangeBorderColor: "#F7B605",
lightYellowBorderColor: "#CFFF2D",
lightGreenBorderColor: "#5DCE06",
lightPurpleBorderColor: "#A680FF",
darkBlueBorderColor: "#0615CE",
}),
},
plugins: [],

Write Preview
Loading…
Cancel
Save