MCQ component added and wrote stories for that

components/MCQ/data.ts

@@ -0,0 +1,18 @@
+import {Props,Options} from "./mcq.types"
+
+const optionsArray:Array<Options>=[
+ {value:1,labelText:"Classes and IDs both are reusable"},
+ {value:2,labelText:"Classes are unique and IDs are reusable"},
+ {value:1,labelText:"IDs are unique and Classes are reusable"},
+ {value:1,labelText:"Both classes and IDs are reusable"},
+
+]
+const data:Props = {
+ question:"What is the difference between class and id in css",
+ description:"Classes and IDs in are something we have learned in unit-2",
+ required: true,
+ options:optionsArray,
+ currect_option:3,
+ orientation:"horizontal",
+}
+export default data;

components/MCQ/mcq.story.tsx

@@ -0,0 +1,27 @@
+import MCQ from "./mcq";
+import data from "./data";
+export default {
+ title: "MCQ",
+};
+
+export const Horizontal = () => (
+ <MCQ
+ question={data.question}
+ description={data.description}
+ required={data.required}
+ options={data.options}
+ currect_option={data.currect_option}
+ orientation={data.orientation}
+ />
+);
+
+export const Vertical = () => (
+ <MCQ
+ question={data.question}
+ description={data.description}
+ required={data.required}
+ options={data.options}
+ currect_option={data.currect_option}
+ orientation={"vertical"}
+ />
+ );

components/MCQ/mcq.tsx

@@ -0,0 +1,14 @@
+import { RadioGroup, Radio } from "@mantine/core";
+import React from "react";
+import { Props } from "./mcq.types";
+
+export default function MCQ(props: Props) {
+ const { question, description, required, options , orientation } = props;
+ return (
+ <RadioGroup label={question} orientation={orientation} description={description} required={required}>
+ {options.map((option) => (
+ <Radio value={option.value.toString()} label={option.labelText}></Radio>
+ ))}
+ </RadioGroup>
+ );
+}

components/MCQ/mcq.types.ts

@@ -0,0 +1,13 @@
+export type Props = {
+ question: string;
+ description: string;
+ options:Array<Options>;
+ required: boolean;
+ currect_option:number,
+ orientation:"horizontal" | "vertical",
+}
+
+export type Options = {
+ value: number;
+ labelText: string;
+}