Your Name
3 years ago
parent
43550749f7
commit
f3b3cd67df
14 changed files with 235 additions and 84 deletions
@ -0,0 +1,24 @@ |
||||
import React from "react"; |
||||
const Button = ({ className, iconClassName, icon, text, onClick }) => { |
||||
return ( |
||||
<button |
||||
onClick={onClick} |
||||
className={`w-fit h-fit flex items-center transiton duration-200 hover:bg-opacity-70 ${className}`} |
||||
> |
||||
{text} |
||||
{icon && ( |
||||
<span className={`rounded-full ${iconClassName}}`}> |
||||
<img src={icon} alt="" className="w-full" /> |
||||
</span> |
||||
)} |
||||
</button> |
||||
); |
||||
}; |
||||
|
||||
export default Button; |
||||
Button.defaultProps = { |
||||
className: |
||||
"bg-darkGreenBg hover:bg-gray-900 textColor border border-lightBlueBorderColor border-b-4 border-lightBlueBorderColor rounded text-sm px-4 py-4", |
||||
iconClassName: "bg-darkGreenBg mr-2", |
||||
text: "اطلاعات بیشتر", |
||||
}; |
||||
@ -0,0 +1,7 @@ |
||||
import React from "react"; |
||||
|
||||
const CardDesign2 = () => { |
||||
return <div>CardDesign2</div>; |
||||
}; |
||||
|
||||
export default CardDesign2; |
||||
@ -0,0 +1,30 @@ |
||||
import React from "react"; |
||||
|
||||
import penIcon from "./pen-icon.svg"; |
||||
|
||||
const CustomToast = ({ |
||||
backgroundColor, |
||||
borderColor, |
||||
textColor, |
||||
padding, |
||||
icon, |
||||
}) => { |
||||
return ( |
||||
<div |
||||
className={`flex flex-row items-center border-2 rounded mt-4 font-bold text-sm ${backgroundColor} ${borderColor} ${textColor} ${padding} `} |
||||
> |
||||
<p className="flex-1">ترسیم نقشه سالن</p> |
||||
<img src={icon} alt="pen" /> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default CustomToast; |
||||
|
||||
CustomToast.defaultProps = { |
||||
backgroundColor: "bg-[#489BEC33]", |
||||
borderColor: "border-[#489BEC]", |
||||
textColor: "text-[#0555A4]", |
||||
padding: "p-4", |
||||
icon: penIcon, |
||||
}; |
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,23 @@ |
||||
import React from "react"; |
||||
|
||||
import infoIcon from "./info-icon.svg"; |
||||
|
||||
const IconText = ({ textColor, textSize }) => { |
||||
return ( |
||||
<div className="flex flex-row items-start mt-4"> |
||||
<img src={infoIcon} alt="info" /> |
||||
<p className={`${textColor} ${textSize} text-justify mr-3 leading-5`}> |
||||
ابتدا باید دیوار ها به صورت حدودی ترسیم شوند و تمامی نقاط به یگ دیگر وصل |
||||
شوند تا طرح برای جایگذاری وسایل آماده شود |
||||
</p> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default IconText; |
||||
|
||||
IconText.defaultProps = { |
||||
icon: infoIcon, |
||||
textColor: "text-[#2E2E2E]", |
||||
textSize: "text-xs", |
||||
}; |
||||
|
After Width: | Height: | Size: 471 B |
Loading…
Reference in new issue