From 147fb997d096ed8d6f4d33c60aa80f11284e72e3 Mon Sep 17 00:00:00 2001
From: WindowsCrashed <windowscrashed0000@gmail.com>
Date: Sat, 12 Aug 2023 20:20:22 -0300
Subject: [PATCH] update question card with question card field

---
 .../assessment/components/QuestionCard.tsx    | 41 ++++---------------
 .../components/QuestionCardField.tsx          | 15 +++++++
 2 files changed, 24 insertions(+), 32 deletions(-)
 create mode 100644 app/javascript/pages/assessment/components/QuestionCardField.tsx

diff --git a/app/javascript/pages/assessment/components/QuestionCard.tsx b/app/javascript/pages/assessment/components/QuestionCard.tsx
index df8c487..7b1fa6d 100644
--- a/app/javascript/pages/assessment/components/QuestionCard.tsx
+++ b/app/javascript/pages/assessment/components/QuestionCard.tsx
@@ -1,5 +1,6 @@
 import React, { FC, useState } from "react";
 import { Button, Card } from "../../../components";
+import { QuestionCardField } from "./QuestionCardField";
 
 interface Props {
     title: string
@@ -35,38 +36,14 @@ export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion
             <Card title={title} className="mb-5">
                 <div>
                     {!collapsed && <div className="grid grid-cols-2 gap-2">
-                        <div>
-                            <span className="text-gray-700">Grau de Dificuldade: </span>
-                            <span>Média</span>
-                        </div>
-                        <div>
-                            <span className="text-gray-700">Categoria: </span>
-                            <span>Modelagem</span>
-                        </div>
-                        <div>
-                            <span className="text-gray-700">Eixo de Formação: </span>
-                            <span>Infra Sistemas</span>
-                        </div>
-                        <div>
-                            <span className="text-gray-700">Assunto: </span>
-                            <span>Fisica</span>
-                        </div>
-                        <div>
-                            <span className="text-gray-700">Habilidade Cognitiva: </span>
-                            <span>Compreender</span>
-                        </div>
-                        <div>
-                            <span className="text-gray-700">Tipo: </span>
-                            <span>Resposta Multipla</span>
-                        </div>
-                        <div>
-                            <span className="text-gray-700">Autoria: </span>
-                            <span>UNIFESO</span>
-                        </div>
-                        <div>
-                            <span className="text-gray-700">Ano: </span>
-                            <span>2023</span>
-                        </div>
+                        <QuestionCardField label="Grau de Dificuldade" value="Média"/>
+                        <QuestionCardField label="Categoria" value="Modelagem"/>
+                        <QuestionCardField label="Eixo de Formação" value="Infra Sistemas"/>
+                        <QuestionCardField label="Assunto" value="Fisica"/>
+                        <QuestionCardField label="Habilidade Cognitiva" value="Compreender"/>
+                        <QuestionCardField label="Tipo" value="Resposta Multipla"/>
+                        <QuestionCardField label="Autoria" value="UNIFESO" />
+                        <QuestionCardField label="Ano" value="2023"/>
                         <div className="col-span-2">
                             <span className="text-gray-700">Enunciado:</span>
                             <div>
diff --git a/app/javascript/pages/assessment/components/QuestionCardField.tsx b/app/javascript/pages/assessment/components/QuestionCardField.tsx
new file mode 100644
index 0000000..60d7515
--- /dev/null
+++ b/app/javascript/pages/assessment/components/QuestionCardField.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from "react";
+
+interface Props {
+    label: string,
+    value: string
+}
+
+export const QuestionCardField: FC<Props> = ({ label, value }) => {
+    return (
+        <div>
+            <span className="text-gray-700">{`${label}: `}</span>
+            <span>{value}</span>
+        </div>    
+    )
+}
\ No newline at end of file