parent
52c8330f0c
commit
988295af64
21 changed files with 78 additions and 205 deletions
|
After Width: | Height: | Size: 868 B |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 177 B |
|
After Width: | Height: | Size: 177 B |
|
After Width: | Height: | Size: 177 B |
|
After Width: | Height: | Size: 675 B |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 177 B |
|
Before Width: | Height: | Size: 558 B After Width: | Height: | Size: 558 B |
@ -0,0 +1,25 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
import StarRating1 from "./StarRating1"; |
||||
|
||||
function Rating() { |
||||
const list = { |
||||
1: <StarRating1 />, |
||||
}; |
||||
const [type, setType] = useState(1); |
||||
return ( |
||||
<div className="w-full flex flex-col items-center"> |
||||
<select |
||||
className="mb-10 w-20 bg-gray-200" |
||||
onChange={(e) => setType(e.target.value)} |
||||
> |
||||
{Object.keys(list).map((option, index) => ( |
||||
<option key={index}>{option}</option> |
||||
))} |
||||
</select> |
||||
{list[type]} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default Rating; |
||||
@ -0,0 +1,25 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
import ProductDesign1 from "./ProductDesign1"; |
||||
|
||||
function SingleProduct() { |
||||
const list = { |
||||
1: <ProductDesign1 />, |
||||
}; |
||||
const [type, setType] = useState(1); |
||||
return ( |
||||
<div className="w-full flex flex-col items-center"> |
||||
<select |
||||
className="mb-10 w-20 bg-gray-200" |
||||
onChange={(e) => setType(e.target.value)} |
||||
> |
||||
{Object.keys(list).map((option, index) => ( |
||||
<option key={index}>{option}</option> |
||||
))} |
||||
</select> |
||||
{list[type]} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default SingleProduct; |
||||
@ -1 +0,0 @@ |
||||
/* No CSS *//*# sourceMappingURL=ProductTags.css.map */ |
||||
@ -1,9 +0,0 @@ |
||||
{ |
||||
"version": 3, |
||||
"mappings": "", |
||||
"sources": [ |
||||
"ProductTags.scss" |
||||
], |
||||
"names": [], |
||||
"file": "ProductTags.css" |
||||
} |
||||
@ -1,167 +0,0 @@ |
||||
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"; |
||||
import blackSettingIcon from "../../assets/icons/black-settings-icon.svg"; |
||||
import lightGreenGiftIcon from "../../assets/icons/light-green-gift-icon.svg"; |
||||
import lightPurpleDoubleRightIcon from "../../assets/icons/light-purple-double-right-icon.svg"; |
||||
import darkBlueNewspaperIcon from "../../assets/icons/dark-blue-newspaper-icon.svg"; |
||||
import darkBlueCancleIcon from "../../assets/icons/dark-blue-cancle-icon.svg"; |
||||
import lightBlueCancleIcon from "../../assets/icons/light-blue-cancle-icon.svg"; |
||||
import lightBlueDeliveryIcon from "../../assets/icons/light-blue-delivery-icon.svg"; |
||||
import lightGreenCancleIcon from "../../assets/icons/light-green-cancle-icon.svg"; |
||||
import lightOrangeCancleIcon from "../../assets/icons/light-orange-cancle-icon.svg"; |
||||
import lightPurpleCancleIcon from "../../assets/icons/light-purple-cancle-icon.svg"; |
||||
import lightYelloCancleIcon from "../../assets/icons/light-yellow-cancle-icon.svg"; |
||||
import lightOrangeRightIcon from "../../assets/icons/light-orange-right-icon.svg"; |
||||
|
||||
const ProductTags = ({ |
||||
tagtitlecolor, |
||||
tagBgColor, |
||||
tagBorderColor, |
||||
deliveryIcon, |
||||
rightIcon, |
||||
darkSettingsIcon, |
||||
greenGiftIcon, |
||||
purpleCheckboxIcon, |
||||
blueNewspaperIcon, |
||||
cancleIcon, |
||||
darkBlueIconCancle, |
||||
lightBlueIconCancle, |
||||
lightBlueIconDelivery, |
||||
lightGreenIconCancle, |
||||
lightOrangeIconCancle, |
||||
lightPurpleIconCancle, |
||||
lightYellowIconCancle, |
||||
lightOrangeIconRight, |
||||
}) => { |
||||
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"> |
||||
<h2 className="text-base bg-red-500 rounded-full shadow-sm shadow-black text-white p-2"> |
||||
تگ محصولات |
||||
</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"> |
||||
productTags |
||||
</span> |
||||
است. |
||||
</p> |
||||
</div> |
||||
{/* product UI Design */} |
||||
<div className="flex flex-wrap items-center justify-around "> |
||||
<div className="mt-2 flex flex-wrap w-1/5 "> |
||||
<button |
||||
className={`flex items-center rounded border-2 px-1 py-1 text-xs ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `} |
||||
> |
||||
{deliveryIcon && ( |
||||
<img src={blackDeliveryIcon} alt="" className="ml-1 w-4" /> |
||||
)} |
||||
{lightBlueIconCancle && ( |
||||
<img src={lightBlueDeliveryIcon} alt="" className="ml-1 w-4" /> |
||||
)} |
||||
{rightIcon && ( |
||||
<img src={blackRightIcon} alt="" className="ml-1 w-4" /> |
||||
)} |
||||
{lightOrangeIconRight && ( |
||||
<img src={lightOrangeRightIcon} alt="" className="ml-1 w-4" /> |
||||
)} |
||||
{darkSettingsIcon && ( |
||||
<img src={blackSettingIcon} alt="" className="ml-1 w-4" /> |
||||
)} |
||||
{greenGiftIcon && ( |
||||
<img src={lightGreenGiftIcon} alt="" className="ml-1 w-4" /> |
||||
)} |
||||
{purpleCheckboxIcon && ( |
||||
<img |
||||
src={lightPurpleDoubleRightIcon} |
||||
alt="" |
||||
className="ml-1 w-4" |
||||
/> |
||||
)} |
||||
{blueNewspaperIcon && ( |
||||
<img src={darkBlueNewspaperIcon} alt="" className="ml-1 w-4" /> |
||||
)} |
||||
ارسال رایگان |
||||
{cancleIcon && ( |
||||
<img src={blackCancleIcon} alt="" className="w-2 mr-3" /> |
||||
)} |
||||
{darkBlueIconCancle && ( |
||||
<img src={darkBlueCancleIcon} alt="" className="w-2 mr-3" /> |
||||
)} |
||||
{lightBlueIconDelivery && ( |
||||
<img src={lightBlueCancleIcon} alt="" className="w-2 mr-3" /> |
||||
)} |
||||
{lightGreenIconCancle && ( |
||||
<img src={lightGreenCancleIcon} alt="" className="w-2 mr-3" /> |
||||
)} |
||||
{lightOrangeIconCancle && ( |
||||
<img src={lightOrangeCancleIcon} alt="" className="w-2 mr-3" /> |
||||
)} |
||||
{lightPurpleIconCancle && ( |
||||
<img src={lightPurpleCancleIcon} alt="" className="w-2 mr-3" /> |
||||
)} |
||||
{lightYellowIconCancle && ( |
||||
<img src={lightYelloCancleIcon} alt="" className="w-2 mr-3" /> |
||||
)} |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default ProductTags; |
||||
|
||||
// color classes that i defined in tailwind.config.js and we can use for text color:
|
||||
// ----> text-grayTextColor
|
||||
// ----> text-lightBlueTextColor
|
||||
// ----> text-lightOrangeTextColor
|
||||
// ----> text-lightYellowTextColor
|
||||
// ----> text-lightGreenTextColor
|
||||
// ----> text-lightPurpleTextColor
|
||||
// ----> text-darkBlueTextColor
|
||||
|
||||
// color classes that i defined in tailwind.config.js and we can use for background color:
|
||||
// ----> bg-productTagBg
|
||||
// ----> bg-lightOrangeBgColor
|
||||
// ----> bg-lightYellowBgColor
|
||||
// ----> bg-lightBlueBgColor
|
||||
// ----> bg-lightGreenBgColor
|
||||
// ----> bg-lightPurpleBgColor
|
||||
|
||||
// color classes that i defined in tailwind.config.js and we can use for border color:
|
||||
// ----> border-lightBlueBorderColor
|
||||
// ----> border-grayBorderColor
|
||||
// ----> border-lightOrangeBorderColor
|
||||
// ----> border-lightYellowBorderColor
|
||||
// ----> border-lightGreenBorderColor
|
||||
// ----> border-lightPurpleBorderColor
|
||||
// ----> border-darkBlueBorderColor
|
||||
|
||||
ProductTags.defaultProps = { |
||||
tagtitlecolor: "text-lightOrangeTextColor", |
||||
tagBgColor: "bg-lightOrangeBgColor", |
||||
tagBorderColor: "border-lightOrangeBorderColor", |
||||
// for icons
|
||||
deliveryIcon: false, |
||||
lightBlueIconDelivery: false, |
||||
rightIcon: false, |
||||
lightOrangeIconRight: true, |
||||
darkSettingsIcon: false, |
||||
greenGiftIcon: false, |
||||
purpleCheckboxIcon: false, |
||||
blueNewspaperIcon: false, |
||||
cancleIcon: false, |
||||
darkBlueIconCancle: false, |
||||
lightBlueIconCancle: false, |
||||
lightGreenIconCancle: false, |
||||
lightOrangeIconCancle: true, |
||||
lightPurpleIconCancle: false, |
||||
lightYellowIconCancle: false, |
||||
}; |
||||
@ -1,8 +0,0 @@ |
||||
.on { |
||||
color: #ffbd35; |
||||
} |
||||
|
||||
.off { |
||||
color: #ccc; |
||||
} |
||||
/*# sourceMappingURL=StarRating.css.map */ |
||||
@ -1,9 +0,0 @@ |
||||
{ |
||||
"version": 3, |
||||
"mappings": "AAAA,AAAA,GAAG,CAAC;EACF,KAAK,EAAE,OAAO;CACf;;AACD,AAAA,IAAI,CAAC;EACH,KAAK,EAAE,IAAI;CACZ", |
||||
"sources": [ |
||||
"StarRating.scss" |
||||
], |
||||
"names": [], |
||||
"file": "StarRating.css" |
||||
} |
||||
Loading…
Reference in new issue