bs-p2/app/routes/ai-quiz.tsx

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.");
    }
}

export default function Index() {
    const [percent, setPercent] = useState(0);
    const [secondsLeft, setSecondsLeft] = useState(30);

    useEffect(() => {
        const interval = setInterval(() => {
            setPercent((prevPercent) => {
                if (prevPercent >= 100) {
                    clearInterval(interval);
                    return 100;
                }
                return Math.round(prevPercent + (100 / 30)); // 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 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'}}>
                <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>0<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="" /> &nbsp; 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="" /> &nbsp; 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="" /> &nbsp; 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 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">
                    <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>
                </div>
            </section>
        </>
    );
}