48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
"use client";
|
|
|
|
import React from "react";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faClose } from "@fortawesome/free-solid-svg-icons";
|
|
// import styles from "./index.module.scss";
|
|
export default function OwnInput({
|
|
value,
|
|
onChange,
|
|
type = "text",
|
|
name,
|
|
placeholder,
|
|
clearable,
|
|
disabled = false,
|
|
className,
|
|
inputClassName = "",
|
|
id,
|
|
}) {
|
|
return (
|
|
<div className={`flex flex-1 relative ${className}`}>
|
|
<input
|
|
id={id}
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
name={name}
|
|
type={type}
|
|
maxLength={11}
|
|
onChange={(e) => onChange(e.target?.value)}
|
|
value={value}
|
|
className={`w-full placeholder:text-[#FFFFFF80] ${inputClassName}`}
|
|
style={{ fontSize: `16px!important` }}
|
|
/>
|
|
{clearable && value != "" && (
|
|
<div className="w-4 h-4 absolute right-2 top-[2px] flex justify-center items-center bg-[#ffffff33] p-1 rounded-full">
|
|
<FontAwesomeIcon
|
|
color="#ffffff40"
|
|
icon={faClose}
|
|
style={{ maxWidth: "12px" }}
|
|
onClick={() => {
|
|
onChange && onChange("");
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|