tiefen_space_h5/components/OwnInput/index.js

43 lines
1.1 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,
}) {
return (
<div className="flex flex-1 relative">
<input
placeholder={placeholder}
disabled={disabled}
name={name}
type={type}
maxLength={11}
onChange={(e) => onChange(e.target?.value)}
value={value}
className="text-[#ffffff] w-full text-[16px] placeholder:text-[#FFFFFF80]"
/>
{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>
);
}