@ -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, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |