Chapters.tsx

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

const Chapters = () => {
    const handleChapterClick = (chapterId: string) => {
        console.log("Clicked");
        // Handle the click event for each chapter and navigate accordingly
        switch (chapterId) {
            case 'chpt1':
                window.location.href = '/opening';
                break;
            case 'chpt2':
                window.location.href = '/overview';
                break;
            // Add more cases for other chapters as needed
            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>
        </>
    );
};
export default Chapters;