mirror of
https://github.com/Lissy93/web-check.git
synced 2025-01-09 07:48:18 +01:00
Adds component for refresh button
This commit is contained in:
parent
fd7feada3a
commit
61a4c4ed5f
59
src/components/misc/ActionButtons.tsx
Normal file
59
src/components/misc/ActionButtons.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import styled from 'styled-components';
|
||||
import Button from 'components/Form/Button';
|
||||
import colors from 'styles/colors';
|
||||
|
||||
const ActionButtonContainer = styled.div`
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
right: 0.25rem;
|
||||
opacity: 0.75;
|
||||
display: flex;
|
||||
gap: 0.125rem;
|
||||
align-items: baseline;
|
||||
`;
|
||||
|
||||
interface Action {
|
||||
label: string;
|
||||
icon: string;
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
const actionButtonStyles = `
|
||||
padding: 0 0.25rem;
|
||||
font-size: 1.25rem;
|
||||
text-align: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
color: ${colors.textColor};
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
transition: all 0.2s ease-in-out;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
color: ${colors.primary};
|
||||
background: ${colors.backgroundDarker};
|
||||
box-shadow: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const ActionButtons = (props: { actions: any }): JSX.Element => {
|
||||
const actions = props.actions;
|
||||
if (!actions) return (<></>);
|
||||
return (
|
||||
<ActionButtonContainer>
|
||||
{ actions.map((action: Action, index: number) =>
|
||||
<Button
|
||||
key={`action-${index}`}
|
||||
styles={actionButtonStyles}
|
||||
onClick={action.onClick}
|
||||
title={action.label}>
|
||||
{action.icon}
|
||||
</Button>
|
||||
)}
|
||||
</ActionButtonContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActionButtons;
|
Loading…
Reference in New Issue
Block a user