mirror of
https://github.com/Lissy93/web-check.git
synced 2025-01-24 23:28:36 +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