1import React, { FC } from 'react';
2import { Button } from 'reactstrap';
3
4interface ToggleMoreLessProps {
5  event(): void;
6  showMore: boolean;
7}
8
9export const ToggleMoreLess: FC<ToggleMoreLessProps> = ({ children, event, showMore }) => {
10  return (
11    <h3>
12      {children}
13      <Button
14        size="xs"
15        onClick={event}
16        style={{
17          padding: '0.3em 0.3em 0.25em 0.3em',
18          fontSize: '0.375em',
19          marginLeft: '1em',
20          verticalAlign: 'baseline',
21        }}
22        color="primary"
23      >
24        show {showMore ? 'less' : 'more'}
25      </Button>
26    </h3>
27  );
28};
29