@ -0,0 +1,22 @@ |
||||
import React from "react"; |
||||
|
||||
import cancleIconPink from "./pink-cancle-icon.svg"; |
||||
|
||||
const CancleIcon = ({ backgroundColor, icon }) => { |
||||
return ( |
||||
<div |
||||
type="button" |
||||
data-modal-toggle="defaultModal" |
||||
className={`p-2 cursor-pointer rounded ${backgroundColor}`} |
||||
> |
||||
<img src={icon} className="w-4" /> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default CancleIcon; |
||||
|
||||
CancleIcon.defaultProps = { |
||||
backgroundColor: "bg-red-600", |
||||
icon: cancleIconPink, |
||||
}; |
||||
|
After Width: | Height: | Size: 559 B |
@ -0,0 +1,44 @@ |
||||
import React from "react"; |
||||
|
||||
const OutlineInput = ({ |
||||
divWidth, |
||||
onClick, |
||||
onFocus, |
||||
onBlur, |
||||
textClr, |
||||
borderClr, |
||||
outlineTitle, |
||||
outlineTitleClr, |
||||
}) => { |
||||
return ( |
||||
<div className={`${divWidth}`}> |
||||
<input |
||||
type="text" |
||||
className={`relative w-full border-2 rounded-md text-sm h-12
|
||||
focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E] ${textClr}`}
|
||||
style={{ |
||||
borderColor: borderClr, |
||||
}} |
||||
onClick={onClick} |
||||
onFocus={onFocus} |
||||
onBlur={onBlur} |
||||
/> |
||||
<span |
||||
className={`absolute right-20 -mt-2 bg-white text-xs px-2 font-bold`} |
||||
style={{ color: outlineTitleClr }} |
||||
> |
||||
{outlineTitle} |
||||
</span> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default OutlineInput; |
||||
|
||||
OutlineInput.defaultProps = { |
||||
divWidth: "w-full", |
||||
textClr: "text-red-600", |
||||
borderClr: "yellow", |
||||
outlineTitle: "مهدی عندلیب", |
||||
outlineTitleClr: "red", |
||||
}; |
||||
@ -0,0 +1,48 @@ |
||||
import React from "react"; |
||||
|
||||
const OutlineSpan = ({ |
||||
divWidth, |
||||
onClick, |
||||
onFocus, |
||||
onBlur, |
||||
textClr, |
||||
borderClr, |
||||
outlineTitle, |
||||
outlineTitleClr, |
||||
defaultValue, |
||||
}) => { |
||||
return ( |
||||
<div className={`${divWidth}`}> |
||||
<span |
||||
className={`absolute right-20 -mt-2 bg-white text-xs px-2 font-bold z-10`} |
||||
style={{ color: outlineTitleClr }} |
||||
> |
||||
{outlineTitle} |
||||
</span> |
||||
<p |
||||
className={`relative w-full border-2 rounded-md text-sm leading-6 text-justify p-3
|
||||
focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E] ${textClr}`}
|
||||
style={{ |
||||
borderColor: borderClr, |
||||
}} |
||||
onClick={onClick} |
||||
onFocus={onFocus} |
||||
onBlur={onBlur} |
||||
> |
||||
{defaultValue} |
||||
</p> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default OutlineSpan; |
||||
|
||||
OutlineSpan.defaultProps = { |
||||
divWidth: "w-full", |
||||
textClr: "text-red-600", |
||||
borderClr: "yellow", |
||||
outlineTitle: "مهدی عندلیب", |
||||
outlineTitleClr: "red", |
||||
defaultValue: |
||||
"جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت", |
||||
}; |
||||
@ -0,0 +1,31 @@ |
||||
import React from "react"; |
||||
|
||||
const OutlineTextarea = ({ text, outlineTitleClr, outlineTitle, outline }) => { |
||||
return ( |
||||
<div> |
||||
{outline && ( |
||||
<span |
||||
className={`absolute right-20 mt-3 bg-white text-xs px-2 font-bold z-10`} |
||||
style={{ color: outlineTitleClr }} |
||||
> |
||||
{outlineTitle} |
||||
</span> |
||||
)} |
||||
<textarea |
||||
style={{ borderWidth: "2px" }} |
||||
class="text-justify leading-5 relative w-full h-20 resize-y rounded-md my-5 text-xs border-[#06BACE] focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]" |
||||
> |
||||
{text} |
||||
</textarea> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default OutlineTextarea; |
||||
|
||||
OutlineTextarea.defaultProps = { |
||||
text: "جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت ", |
||||
outlineTitle: "مهدی عندلیب", |
||||
outlineTitleClr: "red", |
||||
outline: true, |
||||
}; |
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 271 B |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 33 KiB |
@ -0,0 +1,44 @@ |
||||
import React from "react"; |
||||
|
||||
import profilePic1 from "./images/profilePic1.svg"; |
||||
import profilePic2 from "./images/profilePic2.svg"; |
||||
import profilePic3 from "./images/profilePic3.svg"; |
||||
import profilePic4 from "./images/profilePic4.svg"; |
||||
import profilePic5 from "./images/profilePic5.svg"; |
||||
|
||||
const ProfilePicNextToEachOther = ({ users }) => { |
||||
return ( |
||||
<div className="flex flex-row"> |
||||
{users.slice(0, 8).map((user, i) => ( |
||||
<img |
||||
key={i} |
||||
src={user.picture} |
||||
className="w-10" |
||||
style={{ marginLeft: "-5px" }} |
||||
/> |
||||
))} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default ProfilePicNextToEachOther; |
||||
|
||||
ProfilePicNextToEachOther.defaultProps = { |
||||
users: [ |
||||
{ |
||||
picture: profilePic1, |
||||
}, |
||||
{ |
||||
picture: profilePic2, |
||||
}, |
||||
{ |
||||
picture: profilePic3, |
||||
}, |
||||
{ |
||||
picture: profilePic4, |
||||
}, |
||||
{ |
||||
picture: profilePic5, |
||||
}, |
||||
], |
||||
}; |
||||