feat: user reply design

src/index.css

@@ -38,4 +38,24 @@
   .form-input {
     @apply placeholder:text-gray-500;
   }
+
+  .reply-input {
+    @apply shadow-sm h-10 rounded-md block w-full;
+  }
+
+  .reply-block {
+    @apply flex flex-col justify-start items-center h-screen space-y-2 mx-auto;
+  }
+
+  .reply-field {
+    @apply rounded-md bg-white flex flex-col px-4 w-full shadow-md py-2;
+  }
+
+  .reply-field-item {
+    @apply flex justify-between items-center space-y-1 py-4;
+  }
+
+  .reply-text {
+    @apply block text-sm font-medium  capitalize;
+  }
 }

src/operations/forms/index.js

@@ -1,2 +1,3 @@
 export { FormEdit } from "./create/FormEdit";
 export { FormList } from "./list/FormList";
+export { FormReply } from "./reply/FormReply";

src/operations/forms/reply/FormReply.jsx

@@ -0,0 +1,10 @@
+import { ReplyFormHeader, ReplyFormBody } from "./components";
+
+export function FormReply() {
+  return (
+    <div className="w-full mx-auto max-w-[900px]">
+      <ReplyFormHeader />
+      <ReplyFormBody />
+    </div>
+  );
+}

src/operations/forms/reply/components/ReplyFormBody.jsx

@@ -0,0 +1,147 @@
+import { useState } from "react";
+import { Button } from "@material-tailwind/react";
+
+const camelize = (str) => {
+  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
+    if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces
+    return index === 0 ? match.toLowerCase() : match.toUpperCase();
+  });
+};
+
+export function ReplyFormBody() {
+  const [formContent] = useState([
+    {
+      id: 0,
+      name: "0",
+      label: "what is your name ?",
+      required: false,
+      question_type: "short_answer",
+      list: [],
+    },
+    {
+      id: 1,
+      name: "1",
+      label: "Describe yourself ?",
+      required: false,
+      question_type: "paragraph",
+      list: [],
+    },
+    {
+      id: 3,
+      name: "3",
+      label: "Select your hobbies",
+      required: false,
+      question_type: "checkbox",
+      list: ["Reading", "Gardening", "Cooking"],
+    },
+    {
+      id: 4,
+      name: "4",
+      label: "Select your preferred payment method",
+      required: false,
+      question_type: "radio",
+      list: ["Credit Card", "PayPal", "Bitcoin"],
+    },
+  ]);
+
+  const submitForm = (e) => {
+    e.preventDefault();
+
+    //loop through our questions & get values based on the element name
+    const formTargets = e.target;
+    const data = [];
+    formContent.map((content) => {
+      const element = camelize(content.label);
+      if (content.question_type === "checkbox") {
+        const checkboxes = formTargets[element];
+        const selectedOptions = Array.from(checkboxes)
+          .filter((checkbox) => checkbox.checked)
+          .map((checkbox) => checkbox.value);
+        data.push({
+          question: content.label,
+          answer: selectedOptions,
+        });
+      } else {
+        data.push({
+          question: content.label,
+          answer: formTargets[element].value,
+        });
+      }
+    });
+
+    console.log("form data", data);
+  };
+
+  return (
+    <form onSubmit={submitForm} className="reply-block">
+      {formContent.map((field) => (
+        <div key={field.id} className="reply-field">
+          <div className="reply-field-item">
+            <div key={field.name} className="reply-text text-black-700">
+              <label>{field.label}</label>
+            </div>
+          </div>
+
+          <div className="my-4">
+            {field.question_type === "short_answer" && (
+              <input
+                type="text"
+                className="reply-input"
+                placeholder={field.label}
+                name={camelize(field.label)}
+              />
+            )}
+            {field.question_type === "paragraph" && (
+              <input
+                className="reply-input"
+                placeholder={field.label}
+                name={camelize(field.label)}
+              />
+            )}
+
+            {field.question_type === "checkbox" && (
+              <>
+                {field.list.map((option) => (
+                  <div key={option}>
+                    <input
+                      type="checkbox"
+                      id={camelize(option)}
+                      name={camelize(field.label)}
+                      value={option}
+                    />
+                    <label className="px-5" htmlFor={camelize(option)}>
+                      {option}
+                    </label>
+                  </div>
+                ))}
+              </>
+            )}
+            {field.question_type === "radio" && (
+              <>
+                {field.list.map((option) => (
+                  <div key={option}>
+                    <input
+                      type="radio"
+                      id={camelize(option)}
+                      name={camelize(field.label)}
+                      value={option}
+                    />
+                    <label className="px-5" htmlFor={camelize(option)}>
+                      {option}
+                    </label>
+                  </div>
+                ))}
+              </>
+            )}
+          </div>
+        </div>
+      ))}
+
+      <div className="flex mt-5 w-full gap-3 justify-end items-center">
+        <Button size="sm" type="submit">
+          Submit
+        </Button>
+      </div>
+    </form>
+  );
+}

src/operations/forms/reply/components/ReplyFormHeader.jsx

@@ -0,0 +1,32 @@
+import { useCreateFormStore } from "../../../../stores";
+
+function NumberOfQuestion() {
+  const numberOfQuestion = useCreateFormStore(
+    (state) => state.questions.length
+  );
+  return (
+    <p className="text-bgray mt-5 text-[14px]">
+      Number of questions: {numberOfQuestion}
+    </p>
+  );
+}
+
+export function ReplyFormHeader() {
+  const { config } = useCreateFormStore((state) => ({
+    config: state.config,
+  }));
+
+  return (
+    <div
+      className="border-t-[10px] form-block"
+      style={{ borderTopColor: config.color }}
+    >
+      <h1 className="form-input font-bold text-[16px] py-2">Form Header</h1>
+      <p className="form-input max-h-[50px] focus:border-none terxt-[14px]">
+        Form Description
+      </p>
+
+      <NumberOfQuestion />
+    </div>
+  );
+}

src/operations/forms/reply/components/index.js

@@ -0,0 +1,2 @@
+export * from "./ReplyFormBody";
+export * from "./ReplyFormHeader";