From c26ae6194f6b30f328537fda4b3ef0fb5fdf54a0 Mon Sep 17 00:00:00 2001
From: WindowsCrashed <windowscrashed0000@gmail.com>
Date: Mon, 7 Aug 2023 23:09:54 -0300
Subject: [PATCH] add collapse to question card

---
 .../pages/assessment/components/QuestionCard.tsx      | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/javascript/pages/assessment/components/QuestionCard.tsx b/app/javascript/pages/assessment/components/QuestionCard.tsx
index 432c8a9..7981830 100644
--- a/app/javascript/pages/assessment/components/QuestionCard.tsx
+++ b/app/javascript/pages/assessment/components/QuestionCard.tsx
@@ -8,6 +8,8 @@ interface Props {
 }
 
 export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion }) => {
+    const [collapsed, setCollapsed] = useState(false)
+    
     const questionId = title.replace(/\s+/g, '')
     
     const handleAddQuestion = () => {
@@ -32,7 +34,7 @@ export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion
         <div id={questionId}>
             <Card title={title} className="mb-5">
                 <div>
-                    <div className="grid grid-cols-2 gap-2">
+                    {!collapsed && <div className="grid grid-cols-2 gap-2">
                         <div>
                             <span className="text-gray-700">Grau de Dificuldade: </span>
                             <span>Media</span>
@@ -67,10 +69,13 @@ export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion
                                 ijodsjidsoifidfsiojsdfiojdsfiodfs ijdf iodsf iosd iojdf sijodsf iojdsf ioj sdfiojdf sioj dfsiojsdf iojdfs ijodsfijoidfsijodfsijdfsijo dsiofd ijosdfjiofdsidsfio
                             </div>
                         </div>
-                    </div>
+                    </div>}
                     <div className="mt-6">
                         <hr className="h-4"/>
-                        <div className="flex justify-end">
+                        <div className="flex justify-between w-full">
+                            <Button type="default" onClick={() => setCollapsed(!collapsed)}>
+                                {collapsed ? 'Mostrar Mais' : 'Mostrar Menos'}
+                            </Button>
                             <Button type="primary" className={buttonState.bg}
                                 onClick={buttonState.method}>
                                 {buttonState.label}