exam form view with mocked data - no api

Author: monicasmith463

frontend/src/app/(study-assistant)/take-exam/page.tsx

@@ -0,0 +1,11 @@
+import TakeExamForm from "@/components/exam/TakeExamForm";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Next.js TakeExam Page",
+  description: "This is Next.js TakeExam Page",
+};
+
+export default function TakeExam() {
+  return <TakeExamForm />;
+}

frontend/src/components/exam/QuestionInput.tsx

@@ -0,0 +1,15 @@
+import { useState } from "react";
+import ListWithRadio from "../ui/list/ListWithRadio";
+
+export default function QuestionInput() {
+    const [selectedOption, setSelectedOption] = useState<string | null>(null);
+
+    return (
+               <div className="col-span-full">
+
+              <ListWithRadio
+                value={selectedOption} // controlled
+                onChange={(val: React.SetStateAction<string | null>) => setSelectedOption(val)}
+              />
+            </div>)
+}

frontend/src/components/exam/TakeExamForm.tsx

@@ -0,0 +1,33 @@
+"use client";
+import React from "react";
+import Button from "../ui/button/Button";
+import Form from "../form/Form";
+import ComponentCard from "../common/ComponentCard";
+import QuestionInput from "./QuestionInput";
+
+export default function TakeExamForm() {
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Form submitted:");
+  };
+  return (
+    <ComponentCard title="Exam Form">
+      <Form onSubmit={handleSubmit}>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+
+
+        {Array.from({ length: 5 }).map((_, i) => (
+          <QuestionInput key={i} />
+        ))}
+
+
+          <div className="col-span-full">
+            <Button className="w-full" size="sm">
+              Submit
+            </Button>
+          </div>
+        </div>
+      </Form>
+    </ComponentCard>
+  );
+}

frontend/src/components/form/form-elements/DocumentDropZone.tsx

@@ -2,7 +2,6 @@
 import React, { useState } from "react";
 import ComponentCard from "../../common/ComponentCard";
 import { useDropzone } from "react-dropzone";
-import Button from "@/components/ui/button/Button";
 import SpinnerButton from "@/components/ui/button/SpinnerButton";
 
 const DropzoneComponent: React.FC = () => {

frontend/src/components/ui/button/SpinnerButton.tsx

@@ -1,13 +1,10 @@
 import React, { ReactNode } from "react";
-import Button, { ButtonProps } from "./Button";
+import Button from "./Button";
 import Spinner from "@/components/ui/spinner";
 
 interface SpinnerButtonProps {
   children: ReactNode; // Button text or content
-  size?: "sm" | "md"; // Button size
-  variant?: "primary" | "outline"; // Button variant
   startIcon?: ReactNode; // Icon before the text
-  endIcon?: ReactNode; // Icon after the text
   onClick?: () => void; // Click handler
   disabled?: boolean; // Disabled state
   className?: string; // Disabled state
@@ -16,10 +13,7 @@ interface SpinnerButtonProps {
 
 const SpinnerButton: React.FC<SpinnerButtonProps> = ({
   children,
-  size = "md",
-  variant = "primary",
   startIcon,
-  endIcon,
   onClick,
   className = "",
   disabled = false,
@@ -31,6 +25,11 @@ const SpinnerButton: React.FC<SpinnerButtonProps> = ({
       {...props}
       startIcon={loading ? <Spinner /> : startIcon}
       disabled={disabled || loading}
+        onClick={onClick}
+        className={className}
+        variant="primary"
+
+
     >
       {children}
     </Button>

frontend/src/components/ui/list/ListWithRadio.tsx

@@ -0,0 +1,68 @@
+"use client";
+import React, { useState } from "react";
+import RadioSm from "../../form/input/RadioSm";
+
+export default function ListWithRadio() {
+  const [selectedValue, setSelectedValue] = useState<string>("option1");
+
+  const handleChange = (value: string) => {
+    setSelectedValue(value);
+    console.log("Selected Value:", value);
+  };
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] sm:w-fit">
+      <ul className="flex flex-col">
+        <li className="border-b border-gray-200 px-3 py-2.5 last:border-b-0 dark:border-gray-800">
+          <RadioSm
+            id="option1"
+            name="example"
+            value="option1"
+            checked={selectedValue === "option1"}
+            label="Lorem ipsum dolor sit amet"
+            onChange={handleChange}
+          />
+        </li>
+        <li className="border-b border-gray-200 px-3 py-2.5 last:border-b-0 dark:border-gray-800">
+          <RadioSm
+            id="option2"
+            name="example"
+            value="option2"
+            checked={selectedValue === "option2"}
+            label="It is a long established fact reader"
+            onChange={handleChange}
+          />
+        </li>
+        <li className="border-b border-gray-200 px-3 py-2.5 last:border-b-0 dark:border-gray-800">
+          <RadioSm
+            id="option3"
+            name="example"
+            value="option3"
+            checked={selectedValue === "option3"}
+            label="Lorem ipsum dolor sit amet"
+            onChange={handleChange}
+          />
+        </li>
+        <li className="border-b border-gray-200 px-3 py-2.5 last:border-b-0 dark:border-gray-800">
+          <RadioSm
+            id="option4"
+            name="example"
+            value="option4"
+            checked={selectedValue === "option4"}
+            label="Lorem ipsum dolor sit amet"
+            onChange={handleChange}
+          />
+        </li>
+        <li className="border-b border-gray-200 px-3 py-2.5 last:border-b-0 dark:border-gray-800">
+          <RadioSm
+            id="option5"
+            name="example"
+            value="option5"
+            checked={selectedValue === "option5"}
+            label="Lorem ipsum dolor sit amet"
+            onChange={handleChange}
+          />
+        </li>
+      </ul>
+    </div>
+  );
+}