28 lines
787 B
TypeScript
28 lines
787 B
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Button, ButtonProps } from './Button';
|
|
|
|
export interface FloatingActionProps extends ButtonProps {
|
|
position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
|
|
title?: string;
|
|
}
|
|
|
|
export const FloatingAction = ({
|
|
position = 'bottom-left',
|
|
title,
|
|
...props
|
|
}: FloatingActionProps) => {
|
|
const positionMap = {
|
|
'bottom-left': { bottom: '1rem', left: '1rem' },
|
|
'bottom-right': { bottom: '1rem', right: '1rem' },
|
|
'top-left': { top: '1rem', left: '1rem' },
|
|
'top-right': { top: '1rem', right: '1rem' },
|
|
};
|
|
|
|
return (
|
|
<Box position="fixed" style={{ ...positionMap[position], zIndex: 100 }}>
|
|
<Button rounded title={title} {...props} />
|
|
</Box>
|
|
);
|
|
};
|