add selected question card

app/javascript/pages/assessment/NewAssessmentManual.tsx

@@ -7,6 +7,9 @@ import { Axis, Query } from "../../__generated__/graphql-schema";
 import { Button, Card, Input, Navigator } from '../../components';
 import { SideBar } from "./components/SideBar";
 import { QuestionCard } from "./components/QuestionCard";
+import { Link } from "react-router-dom";
+import { SelectedQuestionCard } from "./components/SelectedQuestionCard";
+import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar";
 
 type NewAssessementManualForm = {
   axisWeights: Record<string, any>
@@ -65,9 +68,12 @@ export const NewAssessementManual = () => {
                 <QuestionCard title="Question 6"/>
                 <QuestionCard title="Question 7"/>
             </div>
-            <SideBar> {/*bgColor="bg-yellow-400"*/}
-                Selected Questions
-            </SideBar>
+            <SelectedQuestionsSideBar>
+              <SelectedQuestionCard id="Question1" label="question 1"/>
+              <SelectedQuestionCard id="Question2" label="question 2"/>
+              <SelectedQuestionCard id="Question3" label="question 3"/>
+              <SelectedQuestionCard id="Question5" label="question 5"/>
+            </SelectedQuestionsSideBar>
         </div>
     </>
     // <>

app/javascript/pages/assessment/components/QuestionCard.tsx

@@ -7,6 +7,7 @@ interface Props {
 
 export const QuestionCard: FC<Props> = ({ title }) => {
     return (
+        <div id={title.replace(/\s+/g, '')}>
             <Card title={title} className="mb-5">
                 <div>
                     <div className="grid grid-cols-2 gap-2">
@@ -55,5 +56,6 @@ export const QuestionCard: FC<Props> = ({ title }) => {
                     </div>
                 </div>
             </Card>
+        </div>
     )
 }

app/javascript/pages/assessment/components/SelectedQuestionCard.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { FaTrash } from 'react-icons/fa';
+import { Link } from 'react-router-dom';
+
+type Props = {
+    label: string
+    id: string
+}
+
+export const SelectedQuestionCard: FC<Props> = ({ label, id }) => {
+    return (
+        <div className="mx-1 sm:mx-0 mb-4 mt-3 sm:mb-0 border-l-8 border-primary-light flex bg-white hover:bg-unifeso-50 rounded shadow hover:shadow-md cursor-pointer group transition-all duration-500">
+            <a className="flex flex-col w-full px-3 py-2"
+                href={`#${id}`}>
+                <h2>{`# ${label ?? id}`}</h2>
+            </a>
+            <div className="flex flex-col relative flex-grow justify-center">
+                <button className="group-hover:block absolute bg-gray-300 hover:bg-primary-normal text-gray-500 hover:text-gray-100 hover:shadow-lg rounded-full p-2 cursor-pointer shadow-inner transition-all duration-500"
+                    style={{ left: '-1.5rem' }}>
+                    <FaTrash />
+                </button>
+            </div>
+      </div>   
+    )
+}
+

app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx

@@ -0,0 +1,22 @@
+import React, { FC, PropsWithChildren } from "react";
+import { SideBar } from "./SideBar";
+
+interface Props extends PropsWithChildren {
+
+}
+
+export const SelectedQuestionsSideBar: FC<Props> = ({ children }) => {
+    return (
+        <SideBar>
+            <h1>Questões Selecionadas</h1>
+            <hr className="h-1 mt-2"/>
+            <div>
+                {children ??
+                    <h2 className="text-gray-700 mt-3">
+                        Nenhuma questão selecionada
+                    </h2>
+                }
+            </div>
+        </SideBar>
+    )
+}