Untitled

import * as React from "react";
import { motion } from "framer-motion";
import { addPropertyControls, ControlType } from "framer";

function FormField({
  label,
  type,
  required,
  placeholder,
  border,
  background,
  padding,
  height,
  color,
  focusBorder,
  focusBackground,
  focusColor,
}) {
  const [isFocused, setIsFocused] = React.useState(false);

  return (
    <div style={{ marginBottom: "20px" }}>
      <label style={{ display: "block", marginBottom: "5px" }}>{label}</label>
      <input
        type={type}
        required={required}
        placeholder={placeholder}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        style={{
          width: "100%",
          padding,
          height,
          borderRadius: "5px",
          border: isFocused ? focusBorder : border,
          background: isFocused ? focusBackground : background,
          color: isFocused ? focusColor : color,
          transition: "all 0.3s ease",
        }}
      />
    </div>
  );
}

function CustomForm({ submitButtonText, fields }) {
  const handleSubmit = (e) => {
    e.preventDefault();
    // Implement validation or form submission here
    alert("Form submitted");
  };

  return (
    <form onSubmit={handleSubmit} style={{ padding: "20px", maxWidth: "500px", margin: "auto" }}>
      {fields.map((field, index) => (
        <FormField key={index} {...field} />
      ))}
      <motion.button
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        style={{
          width: "100%",
          padding: "10px 20px",
          border: "none",
          borderRadius: "5px",
          backgroundColor: "#007bff",
          color: "white",
          cursor: "pointer",
        }}
        type="submit"
      >
        {submitButtonText}
      </motion.button>
    </form>
  );
}

CustomForm.defaultProps = {
  submitButtonText: "Submit",
  fields: [
    {
      label: "Name",
      type: "text",
      required: true,
      placeholder: "Enter your name",
      border: "1px solid #ccc",
      background: "#fff",
      padding: "10px",
      height: "40px",
      color: "#000",
      focusBorder: "1px solid #007bff",
      focusBackground: "#e7f3ff",
      focusColor: "#000",
    },
    {
      label: "Email",
      type: "email",
      required: true,
      placeholder: "Enter your email",
      border: "1px solid #ccc",
      background: "#fff",
      padding: "10px",
      height: "40px",
      color: "#000",
      focusBorder: "1px solid #007bff",
      focusBackground: "#e7f3ff",
      focusColor: "#000",
    },
  ],
};

addPropertyControls(CustomForm, {
  submitButtonText: {
    type: ControlType.String,
    title: "Submit Button Text",
    defaultValue: "Submit",
  },
  fields: {
    type: ControlType.Array,
    title: "Fields",
    propertyControl: {
      type: ControlType.Object,
      controls: {
        label: { type: ControlType.String, title: "Label" },
        type: { type: ControlType.String, title: "Type" },
        required: { type: ControlType.Boolean, title: "Required" },
        placeholder: { type: ControlType.String, title: "Placeholder" },
        border: { type: ControlType.String, title: "Border" },
        background: { type: ControlType.Color, title: "Background" },
        padding: { type: ControlType.String, title: "Padding" },
        height: { type: ControlType.String, title: "Height" },
        color: { type: ControlType.Color, title: "Color" },
        focusBorder: { type: ControlType.String, title: "Focus Border" },
        focusBackground: { type: ControlType.Color, title: "Focus Background" },
        focusColor: { type: ControlType.Color, title: "Focus Color" },
      },
    },
  },
});