frondend/components/CoursesSilder.tsx

"use client";

import { CoursesProps } from "@/types";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import './slick.css'
import Link from "next/link";

//npm i --save-dev @types/react-slick




const CoursesSilder = ({ courses }: { courses: CoursesProps[] }) => {
  const settings = {
    arrows: false,
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    appendDots: (dots: any) => (
      <div
        style={{
          width: '100%',
          position: 'absolute',
          bottom: '24px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}
      >
        <ul> {dots} </ul>
      </div>
    ),
    dotsClass: 'dots_custom'
  };
  console.log(courses)
  return (
    <div>
      {courses.length > 0 ? (
        <div className=" bg-[#F6E8E9] items-center h-[100vh] w-full pt-30 transition-all duration-200">
          <Slider className="w-full" {...settings}>
            {courses.map((course, index) => {
              return (
                <div key={index} className=" bg-[#F6E8E9] h-auto pt-30 transition-all justify-items-center duration-20">
                  <div className="hidden lg:grid lg:grid-cols-2 w-full mb-28">
                    <div className="flex col-span-1 h-auto justify-self-end mr-20">
                      <img
                        src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${course.images[0].image}`}
                        alt="Course Image"
                        className="w-[50vh] h-[70vh] object-cover object-center rounded-3xl shadow-md"
                        style={{ aspectRatio: '1 / 1' }}
                      />
                    </div>
                    <div className="flex col-span-1  h-auto justify-start items-center ml-20">
                      <div className="flex flex-col items-start w-[50vh]">
                        <p className="text-4xl">
                          {course.title}
                        </p>
                        <p className="text-base line-clamp-3 overflow-hidden mt-8">
                          {course.sort_description}
                        </p>
                        <div>
                          <Link
                            className={`mt-16 flex items-center justify-center rounded-full bg-[#D60050] px-6 py-3 text-base text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40`}
                            data-ripple-light="true"
                            href={`/courses/${course.id}`}
                          >
                            {"了解更多"}
                          </Link>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className=" relative w-[50vh] h-[70vh] max-sm:w-[36vh] max-sm:h-[60vh]  mt-20 mb-28 overflow-hidden rounded-3xl shadow-md sm:block md:block lg:hidden xl:hidden 2xl:hidden mx-auto">
                    <img
                      src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${course.images[0].image}`}
                      alt="Course Image"
                      className="absolute inset-0 w-full h-full object-cover object-center "
                    />
                    <div className="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-50 text-white p-6">
                      <p className="text-2xl text-center mb-4">
                        {course.title}
                      </p>
                      <p className="text-base line-clamp-3 overflow-hidden text-center mb-8">
                        {course.sort_description}
                      </p>
                      <Link
                         href={`/courses/${course.id}`}
                         className="flex items-center justify-center rounded-full bg-white h-12 w-28 text-sm text-black shadow-md shadow-gray-400/20 transition-all hover:shadow-lg hover:shadow-gray-500/40"
                         data-ripple-light="true"
                             >
                            {"了解更多"}
                     </Link>
                    </div>
                  </div>
                </div>
              )
            })}
          </Slider>
        </div>
      ) : (
        <div className="w-full h-10" />
      )}
    </div>
  )
}

export default CoursesSilder;