133 lines
5.1 KiB
TypeScript
133 lines
5.1 KiB
TypeScript
"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">
|
|
{course.images.length > 0 ? (
|
|
<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' }}
|
|
/>
|
|
) : (
|
|
<img
|
|
src={"/images/piano1.jpg"}
|
|
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-[85vw] 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">
|
|
{course.images.length > 0 ? (
|
|
<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 "
|
|
/>
|
|
) : (
|
|
<img
|
|
src={"/images/piano1.jpg"}
|
|
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;
|
|
|