bs-p2/app/components/TheoryCourses.tsx

type TheoryData = {
    id: number;
    module: number;
    status: number;
    time: number;
    access: number;
    title: string;
    description: string;
    img: string;
    total_marks: string;
};

let theoryData: TheoryData[] = [
    {
      id: 1,
      module: 1,
      status: 2,
      time: 4,
      access: 1,
      title: "Life History of Dr. Maria Montessori",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      img: "/assets/image1.jpg",
      total_marks: "50"
    },
    {
      id: 2,
      module: 2,
      status: 1,
      time: 4,
      access: 1,
      title: "Introduction to Montessori Methods",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      img: "/assets/image2.jpg",
      total_marks: "50"
    },
    {
      id: 3,
      module: 3,
      status: 0,
      time: 4,
      access: 0,
      title: "Exercises in Practical Life",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      img: "/assets/image3.jpg",
      total_marks: "50"
    },
    {
      id: 1,
      module: 1,
      status: 0,
      time: 4,
      access: 0,
      title: "Life History of Dr. Maria Montessori",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      img: "/assets/image1.jpg",
      total_marks: "50"
    },
    {
      id: 2,
      module: 2,
      status: 0,
      time: 4,
      access: 0,
      title: "Introduction to Montessori Methods",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      img: "/assets/image2.jpg",
      total_marks: "50"
    },
    {
      id: 3,
      module: 3,
      status: 0,
      time: 4,
      access: 0,
      title: "Exercises in Practical Life",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      img: "/assets/image3.jpg",
      total_marks: "50"
    }
];

export default function CourseTheory() {
    const getStatusText = (status: number): string => {
        if (status === 2) return "<p style='color: #218B32; font-weight: 600; font-size: 18px; display: inline-flex;'><img style='margin-right: 8px;' src='/assets/green-tick.svg' />Finished</p>";
        if (status === 1) return "<p style='color: #EF7A0C; font-weight: 600; font-size: 18px' >40% Completed</p>";
        if (status === 0) return " ";
        return "";
    }

    return(
        <div>
            <section className="container mx-auto p-4 px-10">
                <div className="flex flex-row justify-between place-items-center rounded-[10px]" style={{background: 'linear-gradient(90.65deg, #4377C6 0%, #3B70C0 100%)'}}>
                    <div className="flex flex-row h-[107px] place-items-center p-4 space-x-6">
                        <div className="relative inline-block">
                            <img className="h-[81px] w-[137px] rounded-[10px]" src="/assets/image3.jpg" alt="" />
                            <button className="absolute inset-0 m-auto h-10 w-10">
                                <img  src="/assets/play.svg" alt="" />
                            </button>
                        </div>
                        <div className="">
                            <h2 className="tet-[18px] font-[700] text-[#FFF] w-[328px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
                            <p className="text-[14px] font-[600] text-[#EF7A0C]">
                                <span> Video</span> &nbsp;|&nbsp; 
                                <span> 30 mins</span>
                            </p>
                        </div>
                    </div>
                    <div className="pr-4">
                        <button className="bg-[#FFF] text-[#000] font-[600] px-6 py-2 text-[18px] rounded-[8px]">Continue Learning</button>
                    </div>
                </div>
            </section>
            <section className="container mx-auto px-4">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 p-6 gap-10 ">
                    {
                        theoryData.map((data, index) => (
                            <div key={index} className={`border-[1px] border-[#218B32] p-3 rounded-[10px] ${data.access === 0 ? 'contrast-[0.3]' : ''} `}>
                                <img className="w-full rounded-[8px]" src={data.img} alt="" />
                                <h2 className="text-[18px] font-[700]">{data.title}</h2>
                                <p className="text-[14px] font-[700] text-[#EF7A0C] py-2"><span>{data.time} Hours</span> | <span>Net Total Marks {data.total_marks}</span></p>
                                <p className="text-[14px] font-[500] text-[#6E6E6E] pb-6">{data.description}</p>
                                <div className="flex flex-row justify-between place-items-center">
                                <button disabled={data.access === 0} className={`text-[18px] font-[600] bg-[#000] rounded-[8px] px-[50px] py-2 text-[#fff] ${data.access == 0 ? 'cursor-not-allowed' : ''}`}>{data.access === 0 ? 'Locked' : 'View'}</button>                                    <div dangerouslySetInnerHTML={{ __html: getStatusText(data.status) }} />
                                </div>
                            </div>
                        ))
                    }
                </div>
            </section>
        </div>
    )
}