stacker.news/components/accordian-item.js

34 lines
1.0 KiB
JavaScript
Raw Normal View History

2021-09-11 21:52:19 +00:00
import { Accordion } from 'react-bootstrap'
import ArrowRight from '../svgs/arrow-right-s-fill.svg'
import ArrowDown from '../svgs/arrow-down-s-fill.svg'
import { useEffect, useState } from 'react'
2021-10-14 21:05:37 +00:00
export default function AccordianItem ({ header, body, headerColor = 'grey', show }) {
const [open, setOpen] = useState(show)
2021-09-11 21:52:19 +00:00
useEffect(() => {
2021-10-14 21:05:37 +00:00
setOpen(show)
2021-09-11 21:52:19 +00:00
}, [])
return (
2021-10-14 21:05:37 +00:00
<Accordion
defaultActiveKey={show ? '0' : undefined}
>
2021-09-11 21:52:19 +00:00
<Accordion.Toggle
as={props => <div {...props} />}
eventKey='0'
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
onClick={() => setOpen(!open)}
>
{open
? <ArrowDown style={{ fill: headerColor }} height={20} width={20} />
: <ArrowRight style={{ fill: headerColor }} height={20} width={20} />}
<div style={{ color: headerColor }}>{header}</div>
</Accordion.Toggle>
<Accordion.Collapse eventKey='0' className='mt-2'>
<div>{body}</div>
</Accordion.Collapse>
</Accordion>
)
}