36 lines
1.2 KiB
JavaScript
36 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import {Box, Button, Collapse, Fade, useDisclosure} from "@chakra-ui/react";
|
|
import {ArrowDownIcon, ArrowUpIcon} from "@chakra-ui/icons";
|
|
|
|
const CollapseItem = ({title, text}) => {
|
|
const { isOpen, onToggle } = useDisclosure()
|
|
|
|
return (
|
|
<div onClick={onToggle} className={'mt-2 cursor-pointer'}>
|
|
<div style={{ border: '1px solid #39a2a5' }} className={'flex p-2 rounded-5 align-items-center justify-content-between'}>
|
|
{isOpen ? (
|
|
<ArrowUpIcon />
|
|
): (
|
|
<ArrowDownIcon />
|
|
)}
|
|
<strong dir={'rtl'} className={'bk-light'} > {title} </strong>
|
|
</div>
|
|
<Collapse in={isOpen}>
|
|
<Box
|
|
p='40px'
|
|
color='black'
|
|
mt='4'
|
|
bg='gray.200'
|
|
rounded='md'
|
|
shadow='md'
|
|
>
|
|
<p dir={'rtl'} className={'bk-light'}>
|
|
{text}
|
|
</p>
|
|
</Box>
|
|
</Collapse>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CollapseItem; |