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

add collapse to question card

Browse Source
This commit is contained in:
WindowsCrashed
2023-08-07 23:09:54 -03:00
parent 0b5964a6d7
commit c26ae6194f
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,8 @@ interface Props {
} }
export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion }) => { export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion }) => {
const [collapsed, setCollapsed] = useState(false)
const questionId = title.replace(/\s+/g, '') const questionId = title.replace(/\s+/g, '')
const handleAddQuestion = () => { const handleAddQuestion = () => {
@@ -32,7 +34,7 @@ export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion
<div id={questionId}> <div id={questionId}>
<Card title={title} className="mb-5"> <Card title={title} className="mb-5">
<div> <div>
<div className="grid grid-cols-2 gap-2"> {!collapsed && <div className="grid grid-cols-2 gap-2">
<div> <div>
<span className="text-gray-700">Grau de Dificuldade: </span> <span className="text-gray-700">Grau de Dificuldade: </span>
<span>Media</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 ijodsjidsoifidfsiojsdfiojdsfiodfs ijdf iodsf iosd iojdf sijodsf iojdsf ioj sdfiojdf sioj dfsiojsdf iojdfs ijodsfijoidfsijodfsijdfsijo dsiofd ijosdfjiofdsidsfio
</div> </div>
</div> </div>
</div> </div>}
<div className="mt-6"> <div className="mt-6">
<hr className="h-4"/> <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} <Button type="primary" className={buttonState.bg}
onClick={buttonState.method}> onClick={buttonState.method}>
{buttonState.label} {buttonState.label}