add question card

app/javascript/pages/assessment/NewAssessmentManual.tsx

@@ -6,6 +6,7 @@ import { Controller, useForm } from "react-hook-form";
 import { Axis, Query } from "../../__generated__/graphql-schema";
 import { Button, Card, Input, Navigator } from '../../components';
 import { SideBar } from "./components/SideBar";
+import { QuestionCard } from "./components/QuestionCard";
 
 type NewAssessementManualForm = {
   axisWeights: Record<string, any>
@@ -51,14 +52,20 @@ export const NewAssessementManual = () => {
   return (
     <>
         <Navigator home />
-        <div className="grid grid-cols-5 gap-4 mt-4 mx-6">
+        <div className="grid grid-cols-5 gap-2 mt-4 mx-6">
-            <SideBar border="r"> {/*bgColor="bg-red-700"*/}
+            <SideBar> {/*bgColor="bg-red-700"*/}
                 Filters
             </SideBar>
-            <div className="col-span-3"> {/*bg-blue-500*/}
+            <div className="col-span-3 border-l-2 border-r-2 border-gray-300 px-6 pb-20"> {/*bg-blue-500*/}
-                Questions
+                <QuestionCard title="Question 1"/>
+                <QuestionCard title="Question 2"/>
+                <QuestionCard title="Question 3"/>
+                <QuestionCard title="Question 4"/>
+                <QuestionCard title="Question 5"/>
+                <QuestionCard title="Question 6"/>
+                <QuestionCard title="Question 7"/>
             </div>
-            <SideBar border="l"> {/*bgColor="bg-yellow-400"*/}
+            <SideBar> {/*bgColor="bg-yellow-400"*/}
                 Selected Questions
             </SideBar>
         </div>

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

@@ -0,0 +1,59 @@
+import React, { FC } from "react";
+import { Button, Card } from "../../../components";
+
+interface Props {
+    title: string
+}
+
+export const QuestionCard: FC<Props> = ({ title }) => {
+    return (
+        <Card title={title} className="mb-5">
+            <div>
+                <div className="grid grid-cols-2 gap-2">
+                    <div>
+                        <span className="text-gray-700">Grau de Dificuldade: </span>
+                        <span>Media</span>
+                    </div>
+                    <div>
+                        <span className="text-gray-700">Categoria: </span>
+                        <span>Modelagem</span>
+                    </div>
+                    <div>
+                        <span className="text-gray-700">Eixo de Formacao: </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 Cogn: </span>
+                        <span>Compreender</span>
+                    </div>
+                    <div>
+                        <span className="text-gray-700">Ano: </span>
+                        <span>2023</span>
+                    </div>
+                    <div>
+                        <span className="text-gray-700">Autoria: </span>
+                        <span>UNIFESO</span>
+                    </div>
+                    <div className="col-span-2">
+                        <span className="text-gray-700">Enunciado:</span>
+                        <div>
+                            ijodsjidsoifidfsiojsdfiojdsfiodfs ijdf iodsf iosd iojdf sijodsf iojdsf ioj sdfiojdf sioj dfsiojsdf iojdfs ijodsfijoidfsijodfsijdfsijo dsiofd ijosdfjiofdsidsfio
+                        </div>
+                    </div>
+                </div>
+                <div className="mt-6">
+                    <hr className="h-4"/>
+                    <div className="flex justify-end">
+                        <Button type="primary">
+                            Adicionar
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </Card>
+    )
+}

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

@@ -2,15 +2,11 @@ import React, { FC, PropsWithChildren } from "react";
 
 interface Props extends PropsWithChildren {
     bgColor?: string;
-    border?: 'l' | 'r'
 }
 
-export const SideBar: FC<Props> = ({ bgColor, border, children }) => {
+export const SideBar: FC<Props> = ({ bgColor, children }) => {
     return (
-        <div className={`
+        <div className={`border-gray-500 ${bgColor ?? ""}`}>
-            ${border ? `border-${border}-2 ` : ''}
-            border-gray-500 ${bgColor ?? ""}
-            `}>
                 <div className="mx-2">
                     {children} 
                 </div>