75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
|
|
import { SectionKeys } from '../../model/types';
|
|
import SlideDown from 'react-slidedown';
|
|
import 'react-slidedown/lib/slidedown.css';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export interface ManagerSectionProps {
|
|
type: SectionKeys;
|
|
title?: string;
|
|
manager?: string;
|
|
managerTelephone?: string;
|
|
managetEmail?: string;
|
|
openChild: SectionKeys | null;
|
|
setOpenChild: (openChild: SectionKeys | null) => void;
|
|
};
|
|
|
|
export const ManagerSection = ({
|
|
type,
|
|
title,
|
|
manager,
|
|
managerTelephone,
|
|
managetEmail,
|
|
openChild,
|
|
setOpenChild
|
|
}: ManagerSectionProps) => {
|
|
|
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
|
|
|
const opeSection = () => {
|
|
const staus = !isOpen;
|
|
setIsOpen(staus);
|
|
if(!!staus){
|
|
setOpenChild(type);
|
|
}
|
|
else {
|
|
setOpenChild(null)
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if(!!openChild && openChild !== type){
|
|
setIsOpen(false);
|
|
}
|
|
}, [openChild]);
|
|
|
|
return (
|
|
<>
|
|
<div className="section">
|
|
<div className="section-title"
|
|
onClick={ () => opeSection() }
|
|
>
|
|
{ title } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
|
|
</div>
|
|
<SlideDown className={'my-dropdown-slidedown'}>
|
|
{ isOpen &&
|
|
<ul className="kv-list">
|
|
<li className="kv-row">
|
|
<span className="k">{ manager }</span>
|
|
<span className="v"></span>
|
|
</li>
|
|
<li className="kv-row">
|
|
<span className="k">{ managerTelephone }</span>
|
|
<span className="v"></span>
|
|
</li>
|
|
<li className="kv-row">
|
|
<span className="k">{ managetEmail }</span>
|
|
<span className="v"></span>
|
|
</li>
|
|
</ul>
|
|
}
|
|
</SlideDown>
|
|
</div>
|
|
</>
|
|
);
|
|
}; |