dwd-projects/bs-p2
1
0
Fork 0
generated from dwd/boilarplate-remix-tailwind-antd
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

s1

Browse Source
This commit is contained in:
Suvodip
2024-07-25 21:42:48 +05:30
parent 24d792009d
commit 59c6326cf0
5 changed files with 264 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/routes/ai-quiz.tsx
View File

@@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Progress } from 'antd';
function letterCount() {
const element = document.getElementById('queryMessage') as HTMLInputElement | null;
if (element) {
@@ -15,9 +14,30 @@ function letterCount() {
}
}
function toggleSection() {
let loadingSection = document.getElementById('loadingSection');
let generateQuiz = document.getElementById('generateQuiz');
if (loadingSection && generateQuiz) {
// Check the current state and toggle
if (getComputedStyle(loadingSection).display === 'none') {
// Show loadingSection and hide generateQuiz
loadingSection.style.display = 'block';
generateQuiz.style.display = 'none';
} else {
// Hide loadingSection and show generateQuiz
loadingSection.style.display = 'none';
generateQuiz.style.display = 'block';
}
} else {
console.error('One or both of the elements are missing.');
}
}
export default function Index() {
const [percent, setPercent] = useState(0);
const [secondsLeft, setSecondsLeft] = useState(30);
const [secondsLeft, setSecondsLeft] = useState(5);
useEffect(() => {
const interval = setInterval(() => {
@@ -26,9 +46,8 @@ export default function Index() {
clearInterval(interval);
return 100;
}
return Math.round(prevPercent + (100 / 30)); // Round percentage
return Math.round(prevPercent + (100 / 5)); // Round percentage
});
setSecondsLeft((prevSeconds) => {
if (prevSeconds <= 1) {
clearInterval(interval);
@@ -40,7 +59,6 @@ export default function Index() {
return () => clearInterval(interval);
}, []);
return (
<>
<section className='container-fluid bg-[#000] '>
@@ -52,8 +70,8 @@ export default function Index() {
</div>
</div>
</section>
<button className="float-right absolute right-0 2xl:right-80 top-32 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>
<section id="generateQuiz" className="container mx-auto max-w-[1129px] shadow-xl rounded-xl px-10 py-8 my-8" style={{display: 'none'}}>
<button onClick={toggleSection} className="float-right absolute right-0 2xl:right-80 top-32 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>
<section id="generateQuiz" className="container mx-auto max-w-[1129px] shadow-xl rounded-xl px-10 py-8 my-8" >
<div className="flex flex-col">
<div className="flex flex-row justify-between place-items-center">
<label className="text-[18px] font-[500] my-4" htmlFor="textToUse">Text to Use</label>
@@ -118,17 +136,16 @@ export default function Index() {
</select>
</div>
<div className="flex justify-center place-items-center">
<button className="px-[40px] py-[12px] text-[18px] font-[600] text-[#FFF] rounded-[10px] bg-[#000]">Generate Quiz</button>
<button onClick={toggleSection} className="px-[40px] py-[12px] text-[18px] font-[600] text-[#FFF] rounded-[10px] bg-[#000]">Generate Quiz</button>
</div>
</section>
<section id="loadingSection" className="container mx-auto max-w-[1129px] shadow-xl rounded-xl px-10 py-8 my-8">
<div className="flex flex-col justify-center place-items-center">
<section id="loadingSection" style={{display: 'none'}} className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8">
<div className="flex flex-col justify-center place-items-center my-auto ">
<img src="../../assets/robot.png" alt="" />
<h2 className="text-[24px] font-[500] py-3">Generating Quiz</h2>
<p className="text-[14px] font-[400] text-[#525252]">This usually takes <span>{secondsLeft}</span> seconds</p>
<div style={{ width: '300px', margin: '50px auto' }}>
<Progress percent={percent} />
<div className='w-full sm:w-1/2'>
<Progress percent={percent} strokeColor="#EF7A0C" trailColor="#FFE9D5" />
</div>
</div>
</section>