40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
import PropTypes from "prop-types";
|
|
import { motion } from "motion/react";
|
|
import clsx from "clsx";
|
|
|
|
function FormField({ label, children, icon, variant }) {
|
|
return (
|
|
<div className="flex items-center">
|
|
<label className={clsx(
|
|
"mr-20 text-lg text-black dark:text-primary-dark whitespace-nowrap",
|
|
variant === 'long' && "sm:w-[5%]"
|
|
)}>
|
|
{label}
|
|
</label>
|
|
<div className={clsx("flex w-full gap-4 items-center", variant === 'long' && 'gap-10')}>
|
|
{children}
|
|
{icon && (
|
|
<motion.div
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
className={clsx(icon.mode === "plain" ? "text-[#444]" : "bg-primary rounded-full p-2 text-white cursor-pointer")}
|
|
onClick={icon.onClick}
|
|
>
|
|
{icon.icon}
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
FormField.propTypes = {
|
|
label: PropTypes.string.isRequired,
|
|
children: PropTypes.node.isRequired,
|
|
icon: PropTypes.object,
|
|
variant: PropTypes.string
|
|
};
|
|
|
|
export default FormField;
|