00a3c8ca2b
* Change to using arrow functions Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> * Add lint rule --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
28 lines
717 B
TypeScript
28 lines
717 B
TypeScript
import styled from '@emotion/styled';
|
|
import { motion } from 'framer-motion';
|
|
|
|
import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
|
|
import { IconPencil } from '@/ui/icon';
|
|
|
|
const StyledEditButtonContainer = styled(motion.div)`
|
|
position: absolute;
|
|
right: 5px;
|
|
`;
|
|
|
|
type EditableCellEditButtonProps = {
|
|
onClick?: () => void;
|
|
};
|
|
|
|
export const EditableCellEditButton = ({
|
|
onClick,
|
|
}: EditableCellEditButtonProps) => (
|
|
<StyledEditButtonContainer
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.1 }}
|
|
whileHover={{ scale: 1.04 }}
|
|
>
|
|
<FloatingIconButton size="small" onClick={onClick} Icon={IconPencil} />
|
|
</StyledEditButtonContainer>
|
|
);
|