Sha256: 3488723e601a83a7de2d3c8e60b9615dc57e62f44e3c5e378e00276e7b319d9d
Contents?: true
Size: 1.92 KB
Versions: 16
Compression:
Stored size: 1.92 KB
Contents
import React from 'react'
import PropTypes from 'prop-types'
import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
const CollapsibleCustomMainWithIcon = (props) => {
const [isCollapsed, setIsCollapsed] = useCollapsible(true)
return (
<>
<Collapsible collapsed={isCollapsed}>
<Flex
align="center"
cursor="pointer"
gap="sm"
htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
justify="between"
position="sticky"
top="0"
>
<Title
dark={props.dark}
size={4}
text="Custom Main Section"
/>
<Collapsible.Icon collapsed={isCollapsed} />
</Flex>
<Collapsible.Content
padding="none"
>
<div>
<List>
<ListItem
align="stretch"
flexDirection="column"
>
{"Checklist item"}
</ListItem>
<ListItem
align="stretch"
flexDirection="column"
>
{"Checklist item"}
</ListItem>
<ListItem
align="stretch"
flexDirection="column"
>
{"Checklist item"}
</ListItem>
<ListItem
align="stretch"
flexDirection="column"
>
{"Checklist item"}
</ListItem>
<ListItem
align="stretch"
flexDirection="column"
>
{"Checklist item"}
</ListItem>
</List>
</div>
</Collapsible.Content>
</Collapsible>
</>
)
}
CollapsibleCustomMainWithIcon.propTypes = {
dark: PropTypes.bool,
}
export default CollapsibleCustomMainWithIcon
Version data entries
16 entries across 16 versions & 2 rubygems