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;
            default:
                break;
        }
    };

    return (
        <>
            <div className="bg-primary-dark">
                <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-[10rem] top-[7rem] z-10 cursor-pointer"
                        onClick={() => handleChapterClick('chpt1')}
                    ></div>

                    <div
                        id="chpt2"
                        className="absolute w-44 h-44 left-24 bottom-16 z-10 cursor-pointer"
                        onClick={() => handleChapterClick('chpt2')}
                    ></div>
                </div>
            </div>
        </>
    );
};
export default Chapters;