169 lines
7.2 KiB
TypeScript
169 lines
7.2 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react'
|
|
import { cn } from '../utils'
|
|
import { VscAdd, VscChromeMinimize } from "react-icons/vsc";
|
|
import { imageProps, } from '@/types';
|
|
import "slick-carousel/slick/slick.css";
|
|
import "slick-carousel/slick/slick-theme.css";
|
|
import Slider from "react-slick";
|
|
import './slick.css'
|
|
|
|
interface CollapseProps {
|
|
title: string
|
|
children?: string
|
|
className?: string
|
|
info?: boolean
|
|
info_images?: Array<imageProps>
|
|
|
|
|
|
}
|
|
|
|
const Collapse: React.FC<CollapseProps> = ({ title, children, className, info, info_images, }) => {
|
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
const settings2 = {
|
|
arrows: false,
|
|
infinite: true,
|
|
//centerPadding: "30px",
|
|
dots: true,
|
|
speed: 500,
|
|
slidesToShow: 3,
|
|
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'
|
|
};
|
|
|
|
const settings1 = {
|
|
arrows: false,
|
|
className: "center",
|
|
centerMode: true,
|
|
infinite: true,
|
|
centerPadding: "30px",
|
|
dots: true,
|
|
speed: 500,
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
beforeChange: (current: number, next: number) => setCurrentSlide(next),
|
|
appendDots: (dots: any) => (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
position: 'absolute',
|
|
bottom: '24px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}
|
|
>
|
|
<ul> {dots} </ul>
|
|
</div>
|
|
),
|
|
dotsClass: 'dots_custom'
|
|
};
|
|
|
|
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [height, setHeight] = useState<number | undefined>(0)
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (isOpen) setHeight(ref.current?.scrollHeight)
|
|
else setHeight(0)
|
|
}, [isOpen])
|
|
|
|
return (
|
|
children && children.length > 0 ? (
|
|
<div className={cn('mt-6 rounded-3xl ', className)}>
|
|
<button
|
|
className={`flex justify-between items-center w-full p-6 text-left ${isOpen ? "rounded-t-lg bg-mainColor" : "rounded-lg bg-[#F2D6D5] "}`}
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
>
|
|
<span className={`lg:text-xl text-lg font-bold ml-3 ${isOpen ? "text-white " : " text-black"}`}>{title}</span>
|
|
{isOpen ? (
|
|
<VscChromeMinimize className='text-white mr-3' />
|
|
) : (
|
|
<VscAdd className='text-black mr-3' />
|
|
)}
|
|
|
|
</button>
|
|
<div
|
|
ref={ref}
|
|
style={{ height: height, }}
|
|
className="flex relative overflow-hidden transition-[height] duration-300 ease-in-out "
|
|
>
|
|
<div className='relative flex flex-col bg-[#FAF6F5] rounded-b-lg w-[65vw] max-sm:w-[90vw]'>
|
|
|
|
{info ? (<div className='relative justify-between items-center '>
|
|
|
|
{info_images && info_images.length > 0 && (
|
|
<div className="flex flex-col relative w-ful h-auto ">
|
|
<div className='relative justify-between items-center hidden lg:flex pt-10'>
|
|
<Slider className=" w-full h-[17vw] px-12 " {...settings2}>
|
|
{info_images.map((image, index) => (
|
|
<div key={index} className="relative w-full h-[13vw] px-1 transition-all justify-items-center ">
|
|
<img
|
|
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${image.image}`}
|
|
alt={`Course Image ${index + 1}`}
|
|
className="w-full h-full object-cover object-center "
|
|
/>
|
|
</div>
|
|
))}
|
|
</Slider>
|
|
</div>
|
|
{/* <div className='relative flex sm:block md:block lg:hidden xl:hidden 2xl:hidden'> */}
|
|
<div className='sm:block md:block lg:hidden xl:hidden 2xl:hidden pt-10'>
|
|
<Slider {...settings1}>
|
|
{info_images.map((image, index) => (
|
|
<div key={index} className="px-4">
|
|
<div key={index} className="relative h-[50vw] transition-all justify-items-center mb-16">
|
|
<img
|
|
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${image.image}`}
|
|
alt={`Course Image ${index + 1}`}
|
|
className="w-full h-full object-cover object-center "
|
|
/>
|
|
{index !== currentSlide && (
|
|
<div
|
|
className="absolute inset-0 bg-white bg-opacity-50 transition-opacity duration-300 "
|
|
style={{
|
|
objectFit: 'cover',
|
|
objectPosition: 'center'
|
|
}}
|
|
></div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Slider>
|
|
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>)
|
|
:
|
|
(<div></div>)}
|
|
<div
|
|
className='px-12 py-14 lg:[&_*]:!text-[1.5rem] [&_*]:!text-[1.0rem] [&_*]:!text-gray-600 [&_*]:!bg-transparent'
|
|
dangerouslySetInnerHTML={{ __html: children || '' }}
|
|
/>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div></div>
|
|
)
|
|
)
|
|
}
|
|
export default Collapse
|