bs-p2/app/components/StartCourse.tsx

import React, { useState } from 'react';
import { Timeline } from 'antd';
interface MaterialItem {
    id: number;
    material: number;
    title: string;
    type: string;
    time: string;
    date: string;
    source: string;
}
const materialData: MaterialItem[] = [
  {
    id: 1,
    material: 1,
    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
    type: "Video",
    time: "30 mins",
    date: "28-01-2024",
    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
  },
  {
    id: 2,
    material: 1,
    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
    type: "Video",
    time: "30 mins",
    date: "28-01-2024",
    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
  },
  {
    id: 3,
    material: 1,
    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
    type: "Reading Material",
    time: "8 mins",
    date: "28-01-2024",
    source: "https://pdfobject.com/pdf/sample.pdf"
  },
  {
    id: 4,
    material: 1,
    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
    type: "MCQ",
    time: "5 mins",
    date: "28-01-2024",
    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
  },
  {
    id: 5,
    material: 1,
    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
    type: "Video",
    time: "30 mins",
    date: "28-01-2024",
    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
  },
  {
    id: 6,
    material: 1,
    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
    type: "Video",
    time: "30 mins",
    date: "28-01-2024",
    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
  }
];

const TimelineComponent = () => {
  const [selectedItem, setSelectedItem] = useState(materialData[0]);

  const handleItemClick = (item : MaterialItem) => {
    setSelectedItem(item);
  };

  const timelineItems = materialData.map((item) => ({
    children: (
      <div className='p-2' onClick={() => handleItemClick(item)} style={{ cursor: 'pointer', backgroundColor: item.id === selectedItem.id ? '#FFF4EA' : '#FFF'}}>
        <p className='text-[12px] font-[600] text-[#6E6E6E]'><span>Material {item.material} </span> | <span>{item.date} </span></p>
        <h2 className='text-[18px] font-[700]'>{item.title}</h2>
        <p className='text-[14px] font-[600] text-[#EF7A0C]'><span>{item.type}</span> | <span>{item.time}</span></p>
      </div>
    ),
    color: item.id === selectedItem.id ? '#EF7A0C' : '#CFCFCF',
    dot: item.id === selectedItem.id
      ? <div className='relative inline-block'>
            <span className='' style={{ border: '4px solid #EF7A0C', borderRadius: '50%', display: 'inline-block', width: 32, height: 32 }}></span>
            <span className='absolute inset-0 m-auto mt-[10px] h-10 w-10' style={{ backgroundColor: '#EF7A0C', borderRadius: '50%', display: 'inline-block', width: 12, height: 12 }}></span> 
        </div>
      : null,
  }));

  return (
    <div>
        <section className='container mx-auto px-4'>
            <div className='grid grid-cols-1 md:grid-cols-7'>
                <div className='md:col-span-2 mt-4'>
                    <Timeline items={timelineItems} />
                </div>
                <div className='md:col-span-5'>
                    <div>
                        {selectedItem.type === 'Video' && (
                            <video autoPlay={true} controls src={selectedItem.source} width="100%" />
                        )}
                        {selectedItem.type === 'Reading Material' && (
                            <iframe src={selectedItem.source} width="100%" height="500px" />
                        )}
                        {selectedItem.type === 'MCQ' && (
                            <div>
                            {/* Render MCQ content here */}
                            </div>
                        )}
                        <p className='text-[12px] font-[600] text-[#6E6E6E]'><span>Material {selectedItem.material} </span> | <span>{selectedItem.date} </span></p>
                        <h2 className='text-[18px] font-[700]'>{selectedItem.title}</h2>
                        <p className='text-[14px] font-[600] text-[#EF7A0C]'><span>{selectedItem.type}</span> | <span>{selectedItem.time}</span></p>
                    </div>
                </div>
            </div>
        </section>
    </div>
  );
};

export default TimelineComponent;