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 (
        <>
            <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);
                     }
                 }}
            />
        </>
    );
};

export default Chapters;