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

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",
};