You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
949 B
44 lines
949 B
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", |
|
};
|
|
|