@chakra-ui/core#AccordionItem JavaScript Examples
The following examples show how to use
@chakra-ui/core#AccordionItem.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ProfilePageReview.js From allay-fe with MIT License | 5 votes |
|
ProfilePageReview = ({ userReviews }) => {
const isLoading = useSelector((state) => state.user.isLoading)
const under = { textDecoration: 'underline' }
return (
<Flex justify="center" mt=".5%" mb="2%">
{!isLoading ? (
<Box
width="1048px"
style={{ border: '1px solid #e6e5e5', padding: '3%' }}
>
{userReviews && userReviews.length > 0 ? (
userReviews.map((review) => {
const postedOn = dateConvert(review.created_at)
return (
<AccordionItem
key={review.review_id}
width="816px"
style={{ margin: '0 auto' }}
>
<AccordionHeader
style={{ borderRadius: '10px ' }}
_expanded={{ bg: '#007F00', color: 'white' }}
>
<Box flex="1" textAlign="left">
<span
style={{
borderRadius: '35%',
backgroundColor: '#a5a5a5',
padding: '.5%',
}}
>
Interview
</span>{' '}
posted at {postedOn}
</Box>
<AccordionIcon />
</AccordionHeader>
<AccordionPanel>
<h6>
<i style={under}>{review.work_status}</i> at{' '}
<i style={under}>{review.company_name}</i> in{' '}
<i style={under}>{review.city}</i>
</h6>
</AccordionPanel>
<AccordionPanel>
<h5>Review:</h5> <span>{review.comment}</span>
</AccordionPanel>
</AccordionItem>
)
})
) : (
<span>no reviews</span>
)}
</Box>
) : null}
</Flex>
)
}
Example #2
| Source File: index.js From here-covid-19-tracker with MIT License | 4 votes |
|
Listing = ({ rows }) => {
const currentDataType = useDataTypeStore(state => state.currentDataType)
const tabIndex = currentDataType
const currentDate = useDataDate(state => state.currentDate)
const updateMapFocus = useMapFocus(state => state.updateMapFocus)
const updateTab = useTabStore(state => state.updateTab)
const handleClick = (coordinates, properties) => {
updateTab(1)
updateMapFocus([ coordinates[1], coordinates[0] ], properties)
}
const grouped = groupBy(rows.map(d =>
d.properties.countryregion === "Mainland China" || d.properties.countryregion === "Hong Kong" || d.properties.countryregion === "Macau" || d.properties.countryregion === "Taiwan" ? { ...d, properties: { ...d.properties, countryregion: "China" } } : d),
// d),
o => o.properties.countryregion
)
const groups = Object.keys(grouped).map(d => {
return {
key: d,
sum: grouped[d].reduce((acc, cur) => acc + parseInt(cur.properties[currentDate] || 0), 0),
sum2: grouped[d].reduce((acc, cur) => acc + parseInt(cur.properties["deaths_" + currentDate] || 0), 0),
sum3: grouped[d].reduce((acc, cur) => acc + parseInt(cur.properties["recoveries_" + currentDate] || 0), 0),
items: grouped[d].filter(d => d.properties[currentDate]).sort((a, b) => b.properties[currentDate] - a.properties[currentDate]),
}
}).filter(d => d.sum)
.sort((a, b) => {
return tabIndex === 0
? b.sum - a.sum
: tabIndex === 1
? b.sum2 - a.sum2
: b.sum3 - a.sum3
})
return (
<div>
<DataTypeSwitch rows={rows} />
<Accordion defaultIndex={[0]} allowMultiple mt="0">
{
groups.map((group, i) => {
return (
<AccordionItem key={group.key} borderColor={!i ? "transparent" : "gray.200"}>
<AccordionHeader>
<Flex justifyContent="space-between" alignItems="center" flex="1 1 auto" py="0.5rem">
<Heading pl="1.25rem" color="gray.500" fontSize="1rem" textTransform="uppercase">
{group.key}
</Heading>
<Box pr="1.25rem" color="gray.500" fontWeight={700}>
{ tabIndex === 0 ? formatThousand(group.sum) : null }
{ tabIndex === 1 ? formatThousand(group.sum2) : null }
{ tabIndex === 2 ? formatThousand(group.sum3) : null }
</Box>
</Flex>
<AccordionIcon mr="1.375rem" />
</AccordionHeader>
<AccordionPanel pt="0">
{
group.items.map(({ properties, geometry }, i) => {
const {
provincestate,
countryregion,
...restProps
} = properties
return (
<PseudoBox
tabIndex={0}
key={provincestate + i}
bg="transparent"
borderRadius="lg"
py="0.75rem"
px="1.25rem"
border="0.0625rem solid"
borderColor="gray.200"
mt="0.5rem"
mb="0.75rem"
onClick={() => handleClick(geometry.coordinates, properties)}
cursor="pointer"
_hover={{
bg: "gray.100",
}}
_focus={{
bg: "gray.100",
}}
_active={{
bg: "gray.200",
}}
>
<Stack isInline alignItems="top" justifyContent="space-between">
<Stack spacing="0.125rem">
<Text lineHeight={1.25} color="gray.500" fontSize="xs" fontWeight={600} textTransform="uppercase">
{countryregion}
</Text>
<Text fontSize="lg" lineHeight={1.25} fontWeight={700}>
{provincestate || countryregion}
</Text>
</Stack>
<Stack isInline alignItems="center" spacing="1.5rem">
<Stack spacing="0.125rem" textAlign="right">
<Text lineHeight={1.25} color="gray.500" fontSize="xs" fontWeight={600} textTransform="uppercase">
{ tabIndex === 0 ? "Confirmed" : null }
{ tabIndex === 1 ? "Deaths" : null }
{ tabIndex === 2 ? "Recoveries" : null }
</Text>
<Text fontSize="lg" fontWeight={700} color="gray.500">
{ tabIndex === 0 ? formatThousand(restProps[currentDate] || 0) : null }
{ tabIndex === 1 ? formatThousand(restProps["deaths_" + currentDate] || 0) : null }
{ tabIndex === 2 ? formatThousand(restProps["recoveries_" + currentDate] || 0) : null }
</Text>
</Stack>
<Icon name="pin" size="1.5rem" color="gray.600"/>
</Stack>
</Stack>
</PseudoBox>
)
})
}
</AccordionPanel>
</AccordionItem>
)
})
}
</Accordion>
</div>
)
}
