owncast/web/components/action-buttons/ActionButton/ActionButton.tsx
renovate[bot] 7c13a3fd01
chore(deps): update dependency eslint-plugin-react to v7.33.0 (#3205)
* chore(deps): update dependency eslint-plugin-react to v7.33.0

* chore: have linter try to autofix and commit linter warnings

* Linter fixes

* chore: tweak how js formatting is run within actions

* fix: type mismatch

* Prettified Code!

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: Owncast <owncast@owncast.online>
Co-authored-by: gabek <gabek@users.noreply.github.com>
2023-07-29 15:57:45 -07:00

32 lines
900 B
TypeScript

import { Button } from 'antd';
import { FC } from 'react';
import cn from 'classnames';
import { ExternalAction } from '../../../interfaces/external-action';
import styles from './ActionButton.module.scss';
export type ActionButtonProps = {
action: ExternalAction;
primary?: boolean;
externalActionSelected: (action: ExternalAction) => void;
};
export const ActionButton: FC<ActionButtonProps> = ({
action,
primary = true,
externalActionSelected,
}) => {
const { title, description, icon, color } = action;
return (
<Button
type={primary ? 'primary' : 'default'}
className={cn([`${styles.button}`, 'action-button'])}
onClick={() => externalActionSelected(action)}
style={{ backgroundColor: color }}
title={description || title}
>
{icon && <img src={icon} className={styles.icon} alt={description} />}
{title}
</Button>
);
};