36 lines
986 B
JavaScript
36 lines
986 B
JavaScript
import PropTypes from "prop-types";
|
|
import { motion } from "motion/react";
|
|
import clsx from "clsx";
|
|
|
|
function FormField({ label, children, icon }) {
|
|
return (
|
|
<div className="flex">
|
|
<label className="mr-4 text-lg text-black dark:text-primary-dark md:w-[30%] xl:w-[20%] 2xl:w-[17%]">
|
|
{label}
|
|
</label>
|
|
<div className="flex w-full gap-4 items-center">
|
|
{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.isRequired,
|
|
};
|
|
|
|
export default FormField;
|