add: closed icon

gdgbari · Oct 12, 2024 · 7f23384 · 7f23384
1 parent ebf07f8
commit 7f23384
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/react/components/QuizCard.tsx b/src/react/components/QuizCard.tsx
@@ -2,6 +2,7 @@ import { Card } from 'react-daisyui';
 import type { Quiz } from '../utils';
 import { FaChevronRight } from 'react-icons/fa';
 import { useAppRouter } from '../utils/store';
+import { FaLock } from "react-icons/fa";
 
 export function QuizCard({ quiz }: { quiz: Quiz }) {
 
@@ -10,9 +11,9 @@ export function QuizCard({ quiz }: { quiz: Quiz }) {
     return <Card role='button' className='border-2 rounded-lg border-white p-4 cursor-pointer' onClick={() => navigateToQuiz(quiz.quizId)}>
         <div className="flex">
             <div className="flex-1 flex flex-col items-start">
-                <p >{quiz.maxScore} points ({quiz.type} quiz)</p>
+                <p className='flex gap-2 items-center justify-center'>{quiz.maxScore} points ({quiz.type} quiz) {!quiz.isOpen && <FaLock size={13} color='red' />}</p>
                 <h2 className='text-3xl font-semibold'> {quiz.title}</h2>
-                <p> {quiz.questionList.length} questions {quiz.isOpen == false? "(closed)": null}</p>
+                <p> {quiz.questionList.length} questions</p>
                 <div className='flex flex-1' />
                 <div className='flex justify-between w-full'>
                     <p> time: {quiz.timerDuration/1000} s</p>

diff --git a/src/react/pages/app/QuizInfo.tsx b/src/react/pages/app/QuizInfo.tsx
@@ -9,6 +9,7 @@ import { Modal } from '@mantine/core';
 import { useEffect, useRef, useState, type MutableRefObject } from "react";
 import { QRCode } from "react-qrcode-logo"
 import type { Quiz } from "../../utils";
+import { FaLock } from "react-icons/fa";
 
 
 
@@ -79,7 +80,7 @@ const QuizDetails = ({ quiz }: { quiz: Quiz }) => {
     const [showSecrets, setShowSecrets] = useState(false)
 
     return <div className="flex flex-col items-stretch text-start">
-        <h2 className="text-4xl font-bold mr-4">Title: {quiz.title} {quiz.isOpen == false && "(closed)"}</h2>
+        <h2 className="text-4xl font-bold mr-4f flex items-center gap-4">Title: {quiz.title} {!quiz.isOpen && <FaLock size={20} color='red' />}</h2>
         <div className="flex items-center mt-4">
             <h2 className="text-xl font-bold mr-4 w-40">Quiz type: </h2>
             <Input
@@ -139,5 +140,6 @@ const QuizDetails = ({ quiz }: { quiz: Quiz }) => {
                 </div>
             ))}
         </div> }
+        <div className="mt-10" />
     </div>
 }