geonizeli/progress-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add selected question card

Browse Source
This commit is contained in:
WindowsCrashed
2023-08-07 22:06:14 -03:00
parent eb33921b20
commit decd05a156
4 changed files with 103 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
app/javascript/pages/assessment/components/QuestionCard.tsx
View File

@@ -7,53 +7,55 @@ interface Props {
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 id={title.replace(/\s+/g, '')}>
<Card title={title} className="mb-5">
<div>
<div className="grid grid-cols-2 gap-2">
<div>
ijodsjidsoifidfsiojsdfiojdsfiodfs ijdf iodsf iosd iojdf sijodsf iojdsf ioj sdfiojdf sioj dfsiojsdf iojdfs ijodsfijoidfsijodfsijdfsijo dsiofd ijosdfjiofdsidsfio
<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>
<div className="mt-6">
<hr className="h-4"/>
<div className="flex justify-end">
<Button type="primary">
Adicionar
</Button>
</div>
</div>
</div>
</Card>
</Card>
</div>
)
}

26
app/javascript/pages/assessment/components/SelectedQuestionCard.tsx Normal file
View File

@@ -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>
)
}

22
app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx Normal file
View File

@@ -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>
)
}