Chapters.tsx

import chapters from '../assets/backgrounds/chapters.svg';

const Chapters = () => {
    const handleChapterClick = (chapterId: string) => {
        switch (chapterId) {
            case 'chpt1':
                window.location.href = '/intro';
                break;
            case 'chpt2':
                window.location.href = '/insulin';
                break;
            case 'chpt3':
                window.location.href = '/symptoms';
                break;
            case 'chpt4':
                window.location.href = '/treatment';
                break;
            default:
                break;
        }
    };

    return (
        <>
            <div className="flex absolute bottom-0 left-0 z-3">
                <img src={chapters} alt={chapters}
                     onClick={(e: React.MouseEvent<HTMLImageElement>) => {
                         const target = e.target as HTMLImageElement;
                         console.log(target.src);
                         if (target.id) {
                             handleChapterClick(target.id);
                         }
                     }}
                />
                <div
                    id="chpt1"
                    className="absolute w-44 h-44 left-[9%] top-[17%] z-10 cursor-pointer"
                    onClick={() => handleChapterClick('chpt1')}
                ></div>

                <div
                    id="chpt2"
                    className="absolute w-44 h-44 left-[5%] bottom-[18%] z-10 cursor-pointer"
                    onClick={() => handleChapterClick('chpt2')}
                ></div>

                <div
                    id="chpt3"
                    className="absolute w-44 h-44 left-[35%] bottom-[10%] z-10 cursor-pointer"
                    onClick={() => handleChapterClick('chpt3')}
                ></div>

                <div
                    id="chpt4"
                    className="absolute w-44 h-44 left-[25%] top-[40%] z-10 cursor-pointer"
                    onClick={() => handleChapterClick('chpt4')}
                ></div>
            </div>
        </>
    );
};
export default Chapters;