questions

src/app/dashboard/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Dashboard = () => {
+  return <div>Dashboard</div>;
+};
+
+export default Dashboard;

src/app/index.tsx

@@ -6,7 +6,6 @@ import { createRoot } from "react-dom/client";
 const root = createRoot(document.body);
 root.render(
   <div className="h-full bg-gray-50">
-    <Navbar user={null} />
     <Layout />
   </div>
 );

src/app/layout.tsx

@@ -1,14 +1,9 @@
+import Dashboard from "./dashboard";
+import Navbar from "./navbar";
+import Questions from "./questions";
 import React from "react";
 import Settings from "./settings";
 
-const Dashboard = () => {
-  return <div>Dashboard</div>;
-};
-
-const Questions = () => {
-  return <div>Questions</div>;
-};
-
 const NotFound = () => {
   return <div>Not Found</div>;
 };
@@ -39,5 +34,12 @@ export const Layout = () => {
   const hash = useHashState();
   const route = routes.find((r) => `#/${r.path}` === hash);
   const Component = route ? route.component : NotFound;
-  return <div className="h-full bg-gray-50 p-3 pt-5">{<Component />}</div>;
+  return (
+    <div className="h-full bg-gray-50 w-full">
+      <Navbar user={null} />
+      <div className="p-3" style={{ paddingTop: "50px"}}>
+        <Component />
+      </div>
+    </div>
+  );
 };

src/app/navbar.tsx

@@ -25,7 +25,7 @@ export default function Navbar({ user }: { user: any }) {
   };
 
   return (
-    <Disclosure as="nav" className="bg-white shadow-sm">
+    <Disclosure as="nav" className="bg-white shadow-sm absolute w-full p-1">
       {({ open }) => (
         <>
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">

src/app/questions/index.tsx

@@ -0,0 +1,11 @@
+import List from "./list";
+import React from "react";
+
+export const QuestionsPage = () => {
+  return (
+    <div>
+      <List />
+    </div>
+  );
+};
+export default QuestionsPage;

src/app/questions/interfaces.ts

@@ -0,0 +1,28 @@
+export interface InputOption {
+    value: string;
+    label: string;
+}
+
+export interface Answer {
+    inputId: string;
+    inputType: string;
+    answerText: string;
+}
+
+export interface Question {
+    question: string;
+    inputId: string;
+    inputType: "input" | "text" | "radio" | "checkbox" | "select" | "textarea" | "fieldset";
+    inputOptions?: InputOption;
+    inputTypeValue?: string;
+    answers?: Answer[];
+}
+
+
+export interface QuestionAnswer {
+    question: Question;
+    chainRes: {
+        text: string;
+        [key: string]: any;
+    }
+}

src/app/questions/list.sample.tsx

@@ -0,0 +1,88 @@
+export const questionSamples = [
+  {
+    question: {
+      question: "Êtes-vous éligible pour travailler au Canada?",
+      inputId: "input-q_4e16b181f7f75a81edab7d4322707550",
+      inputType: "fieldset",
+      answers: [
+        {
+          inputId: "input-q_4e16b181f7f75a81edab7d4322707550-0",
+          inputType: "radio",
+          answerText: "Yes",
+        },
+        {
+          inputId: "input-q_4e16b181f7f75a81edab7d4322707550-1",
+          inputType: "radio",
+          answerText: "No",
+        },
+      ],
+    },
+    chainRes: {
+      text: 'input-q_4e16b181f7f75a81edab7d4322707550-0',
+    },
+  },
+
+  {
+    question: {
+      question:
+        "Do you have technical expertise in any of the following areas?(optional)",
+      inputId: "input-q_74e6547a6894e8856547fb4b8eddce7d",
+      inputType: "fieldset",
+      answers: [
+        {
+          inputId:
+            "ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-0",
+          inputType: "checkbox",
+          answerText: "Video Streaming",
+        },
+        {
+          inputId:
+            "ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-1",
+          inputType: "checkbox",
+          answerText: "Security",
+        },
+        {
+          inputId:
+            "ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-2",
+          inputType: "checkbox",
+          answerText: "Machine Learning",
+        },
+        {
+          inputId:
+            "ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-3",
+          inputType: "checkbox",
+          answerText: "Front-end Development",
+        },
+        {
+          inputId:
+            "ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-4",
+          inputType: "checkbox",
+          answerText: "Event-Driven Design",
+        },
+        {
+          inputId:
+            "ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-5",
+          inputType: "checkbox",
+          answerText: "Miscroservices",
+        },
+      ],
+    },
+    chainRes: {
+      text: '"ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-0,ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-1,ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-2,ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-3,ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-4"',
+    },
+  },
+  {
+    question: {
+      question: "City you reside in",
+      inputId: "input-q_7ae9d215d9398af70eba60d4030366bc",
+      inputType: "input",
+      inputTypeValue: "text",
+    },
+    chainRes: {
+      text: "Toronto",
+    },
+  },
+];
+
+
+export default questionSamples;