35 lines
850 B
TypeScript
35 lines
850 B
TypeScript
import {
|
|
AccordionItem as AccordionItemChakra,
|
|
AccordionButton,
|
|
Box,
|
|
Heading,
|
|
AccordionIcon,
|
|
AccordionPanel,
|
|
AccordionPanelProps,
|
|
forwardRef,
|
|
} from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
type AccordionProps = AccordionPanelProps & {
|
|
children: React.ReactNode;
|
|
heading: string;
|
|
};
|
|
export const AccordionItem = forwardRef<AccordionProps, 'div'>(
|
|
({ children, heading, ...panelProps }, ref) => {
|
|
return (
|
|
<AccordionItemChakra>
|
|
<AccordionButton borderBottomWidth="1px">
|
|
<Box flex="1" textAlign="left">
|
|
<Heading size="md"> {heading}</Heading>
|
|
</Box>
|
|
<AccordionIcon />
|
|
</AccordionButton>
|
|
<AccordionPanel ref={ref} {...panelProps} pb={4} overflowY="scroll">
|
|
{children}
|
|
</AccordionPanel>
|
|
</AccordionItemChakra>
|
|
);
|
|
}
|
|
);
|
|
|