generated from dwd/boilarplate-remix-tailwind-antd
154 lines
8.8 KiB
TypeScript
154 lines
8.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { Progress } from 'antd';
|
||
function letterCount() {
|
||
const element = document.getElementById('queryMessage') as HTMLInputElement | null;
|
||
if (element) {
|
||
const valueLength = element.value.length;
|
||
const lengthElement = document.getElementById('letterLength');
|
||
if (lengthElement) {
|
||
lengthElement.innerHTML = valueLength.toString();
|
||
}
|
||
console.log(valueLength);
|
||
} else {
|
||
console.error("Element with id 'queryMessage' not found.");
|
||
}
|
||
}
|
||
|
||
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(5);
|
||
|
||
useEffect(() => {
|
||
const interval = setInterval(() => {
|
||
setPercent((prevPercent) => {
|
||
if (prevPercent >= 100) {
|
||
clearInterval(interval);
|
||
return 100;
|
||
}
|
||
return Math.round(prevPercent + (100 / 5)); // Round percentage
|
||
});
|
||
setSecondsLeft((prevSeconds) => {
|
||
if (prevSeconds <= 1) {
|
||
clearInterval(interval);
|
||
return 0;
|
||
}
|
||
return prevSeconds - 1;
|
||
});
|
||
}, 1000);
|
||
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
return (
|
||
<>
|
||
<section className='container-fluid bg-[#000] '>
|
||
<div className="flex flex-row justify-center gap-x-8 py-6">
|
||
<p className="text-[42px] w-[42px] h-[31px]">✨</p>
|
||
<div className="flex flex-col justify-center place-items-center">
|
||
<p className="text-[#FFF] text-[24px] font-[700]"> Take an AI Generative Quiz</p>
|
||
<p className="text-[#FFF] text-[16px] font-[400]">Convert any text into an interactive quiz session</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<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">✕</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>
|
||
<p className="text-[16px] font-[500] text-[#9D9D9D]"><span id="letterLength"></span><span>/2000</span></p>
|
||
</div>
|
||
<textarea onChange={letterCount} name="queryMessage" id="queryMessage" rows="6" maxLength="200" className="focus:outline-none border-[1px] border-[#CFCFCF] rounded-[8px] p-6" placeholder="Enter the topic you’d like to generate a quiz for."></textarea>
|
||
</div>
|
||
<h2 className="text-[18px] font-[500] my-4">Trending</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
<div className="border-[1px] border-[#CFCFCF] rounded-[8px]">
|
||
<div className="bg-[#C5DCFF] rounded-t-[8px] flex justify-center place-items-center">
|
||
<img className="p-6" src="../../assets/quiz-logo.svg" alt="" />
|
||
</div>
|
||
<div className="flex flex-col justify-center px-3 py-2">
|
||
<h3 className="text-[14px] font-[500] ">Dr. Marie Montessori Life Journey</h3>
|
||
<p className="text-[12px] font-[400] pt-1 pb-2 text-[#525252]">12 classmates have taken this quiz. </p>
|
||
</div>
|
||
</div>
|
||
<div className="border-[1px] border-[#CFCFCF] rounded-[8px]">
|
||
<div className="bg-[#E2C5FF] rounded-t-[8px] flex justify-center place-items-center">
|
||
<img className="p-6" src="../../assets/quiz-logo.svg" alt="" />
|
||
</div>
|
||
<div className="flex flex-col justify-center px-3 py-2">
|
||
<h3 className="text-[14px] font-[500]">Montessori Methods</h3>
|
||
<p className="text-[12px] font-[400] text-[#525252]">10 classmates have taken this quiz. </p>
|
||
</div>
|
||
</div>
|
||
<div className="border-[1px] border-[#CFCFCF] rounded-[8px]">
|
||
<div className="bg-[#FFD0C5] rounded-t-[8px] flex justify-center place-items-center">
|
||
<img className="p-6" src="../../assets/quiz-logo.svg" alt="" />
|
||
</div>
|
||
<div className="flex flex-col justify-center px-3 py-2">
|
||
<h3 className="text-[14px] font-[500] ">Practical Methods</h3>
|
||
<p className="text-[12px] font-[400] text-[#525252]">12 classmates have taken this quiz.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2 className="text-[18px] font-[500] my-4">Or try these</h2>
|
||
<div className="flex flex-col md:flex-row gap-[10px]">
|
||
<div className="drop-shadow-2xl">
|
||
<button className="inline-flex justify-center place-items-center border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252]">
|
||
<img src="../../assets/button-icon.svg" alt="" /> Simplify Questions
|
||
</button>
|
||
</div>
|
||
<div className="drop-shadow-2xl">
|
||
<button className="inline-flex justify-center place-items-center border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252]">
|
||
<img src="../../assets/button-icon.svg" alt="" /> Similar Topics
|
||
</button>
|
||
</div>
|
||
<div className="drop-shadow-2xl">
|
||
<button className="inline-flex justify-center place-items-center border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252]">
|
||
<img src="../../assets/button-icon.svg" alt="" /> Make it fun & easy
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<h2 className="text-[18px] font-[500] my-4">Difficulty</h2>
|
||
<div className="drop-shadow-sm">
|
||
<select name="difficulty" id="difficulty" className="flex w-[158px] border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252] focus:outline-none bg-[#FFF]">
|
||
<option value="Easy">Easy</option>
|
||
<option value="Normal">Normal</option>
|
||
<option value="Hard">Hard</option>
|
||
</select>
|
||
</div>
|
||
<div className="flex justify-center place-items-center">
|
||
<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" 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 className='w-full sm:w-1/2'>
|
||
<Progress percent={percent} strokeColor="#EF7A0C" trailColor="#FFE9D5" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|