76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
|
import React, { useState, useRef, useEffect } from 'react'
|
||
|
|
import { cn } from '../utils'
|
||
|
|
import { VscAdd, VscChromeMinimize } from "react-icons/vsc";
|
||
|
|
import { ScheduleProps } from '@/types';
|
||
|
|
import moment from 'moment';
|
||
|
|
|
||
|
|
interface CollapseProps {
|
||
|
|
title: string
|
||
|
|
rerganizedSchedule?: {
|
||
|
|
yearAndMonth: string
|
||
|
|
schedules: ScheduleProps[]
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const ScheduleCollapse: React.FC<CollapseProps> = ({ title, rerganizedSchedule }) => {
|
||
|
|
|
||
|
|
|
||
|
|
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 (
|
||
|
|
<div className={cn('mt-6 rounded-3xl ')}>
|
||
|
|
<button
|
||
|
|
className={`flex justify-between items-center w-full p-6 text-left ${isOpen ? "rounded-t-lg bg-[#D60050]" : "rounded-lg bg-[#F2D6D5] "}`}
|
||
|
|
onClick={() => setIsOpen(!isOpen)}
|
||
|
|
>
|
||
|
|
<span className={`text-xl 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]'>
|
||
|
|
|
||
|
|
|
||
|
|
{rerganizedSchedule ? (
|
||
|
|
<div className='px-12 py-14'>
|
||
|
|
{rerganizedSchedule.schedules.map((schedule, index) => (
|
||
|
|
<div key={index} className='mb-4'>
|
||
|
|
<h3 className='text-xl font-bold'>
|
||
|
|
{ moment.utc(schedule.date).format("MM月DD日")}
|
||
|
|
</h3>
|
||
|
|
<p className='text-gray-600'>{schedule.title}</p>
|
||
|
|
<p className='text-gray-600'>{schedule.info1}</p>
|
||
|
|
<p className='text-gray-600'>{schedule.info2}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div
|
||
|
|
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
|
||
|
|
}
|
||
|
|
export default ScheduleCollapse
|