You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.1 KiB
43 lines
1.1 KiB
import {IconProp} from "@fortawesome/fontawesome-svg-core";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {Row, Col, Button} from "reactstrap";
|
|
|
|
interface ButtonProps {
|
|
children?: React.ReactNode;
|
|
icon?: IconProp;
|
|
position?: 'left' | 'right';
|
|
[props: string]: any;
|
|
}
|
|
const ButtonWithIcon = ({icon, children, position = 'left', ...props}: ButtonProps) => {
|
|
if (icon && position === 'left') {
|
|
return <Button {...props}>
|
|
<Row className='gx-2 align-items-end'>
|
|
<Col className='col-auto'>
|
|
<FontAwesomeIcon icon={icon} />
|
|
</Col>
|
|
<Col className='col-auto'>
|
|
{children}
|
|
</Col>
|
|
</Row>
|
|
</Button>
|
|
}
|
|
else if (icon && position === 'right') {
|
|
return <Button {...props}>
|
|
<Row className='gx-2 align-items-end'>
|
|
<Col className='col-auto'>
|
|
{children}
|
|
</Col>
|
|
<Col className='col-auto'>
|
|
<FontAwesomeIcon icon={icon} />
|
|
</Col>
|
|
</Row>
|
|
</Button>
|
|
}
|
|
|
|
else {
|
|
return (<Button {...props}>{children}</Button>)
|
|
}
|
|
}
|
|
|
|
export default ButtonWithIcon
|