add add question mechanic

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

@@ -1,13 +1,35 @@
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 import { Button, Card } from "../../../components";
 
 interface Props {
     title: string
+    onAddQuestion: Function,
+    onRemoveQuestion: Function
 }
 
-export const QuestionCard: FC<Props> = ({ title }) => {
+export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion }) => {
+    const questionId = title.replace(/\s+/g, '')
+    
+    const handleAddQuestion = () => {
+        setButtonState({
+            bg: 'bg-red-700', label: 'Remover', method: handleRemoveQuestion
+        })
+        onAddQuestion(title)
+    }
+    
+    const handleRemoveQuestion = () => {
+        setButtonState({
+            bg: '', label: 'Adicionar', method: handleAddQuestion
+        })
+        onRemoveQuestion(questionId)
+    }
+
+    const [buttonState, setButtonState] = useState({
+        bg: '', label: 'Adicionar', method: handleAddQuestion
+    })
+
     return (
-        <div id={title.replace(/\s+/g, '')}>
+        <div id={questionId}>
             <Card title={title} className="mb-5">
                 <div>
                     <div className="grid grid-cols-2 gap-2">
@@ -49,8 +71,9 @@ export const QuestionCard: FC<Props> = ({ title }) => {
                     <div className="mt-6">
                         <hr className="h-4"/>
                         <div className="flex justify-end">
-                            <Button type="primary">
-                                Adicionar
+                            <Button type="primary" className={buttonState.bg}
+                                onClick={buttonState.method}>
+                                {buttonState.label}
                             </Button>
                         </div>
                     </div>

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

@@ -5,9 +5,10 @@ import { Link } from 'react-router-dom';
 type Props = {
     label: string
     id: string
+    onRemoveQuestion: Function
 }
 
-export const SelectedQuestionCard: FC<Props> = ({ label, id }) => {
+export const SelectedQuestionCard: FC<Props> = ({ label, id, onRemoveQuestion }) => {
     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"
@@ -16,7 +17,8 @@ export const SelectedQuestionCard: FC<Props> = ({ label, id }) => {
             </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' }}>
+                    style={{ left: '-1.5rem' }}
+                    onClick={() => onRemoveQuestion(id)}>
                     <FaTrash />
                 </button>
             </div>

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

@@ -1,17 +1,22 @@
 import React, { FC, PropsWithChildren } from "react";
 import { SideBar } from "./SideBar";
+import { SelectedQuestionCard } from "./SelectedQuestionCard";
 
-interface Props extends PropsWithChildren {
-
+type Props = {
+    questions: {id: string, label: string}[],
+    onRemoveQuestion: Function
 }
 
-export const SelectedQuestionsSideBar: FC<Props> = ({ children }) => {
+export const SelectedQuestionsSideBar: FC<Props> = ({ questions, onRemoveQuestion }) => {
     return (
         <SideBar>
             <h1>Questões Selecionadas</h1>
             <hr className="h-1 mt-2"/>
             <div>
-                {children ??
+                {questions.length ?
+                    questions.map(q => <SelectedQuestionCard
+                            key={q.id} id={q.id} label={q.label}
+                            onRemoveQuestion={onRemoveQuestion}/>) :
                     <h2 className="text-gray-700 mt-3">
                         Nenhuma questão selecionada
                     </h2>