38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import * as React from 'react';
|
|
import { MenuIcon, XIcon } from '@heroicons/react/outline';
|
|
|
|
interface IFloatingButtonProps {
|
|
children: React.ReactNode[] | React.ReactNode
|
|
className: string
|
|
}
|
|
|
|
const toggleState = (
|
|
isHidden: boolean,
|
|
setHidden: React.Dispatch<React.SetStateAction<boolean>>
|
|
) => {
|
|
setHidden(!isHidden);
|
|
};
|
|
|
|
const FloatingButton: React.FC<IFloatingButtonProps> = (props: IFloatingButtonProps) => {
|
|
const [isHidden, setHidden] = React.useState(true);
|
|
const buttonListClasses = isHidden ? 'opacity-0' : 'opacity-100';
|
|
const icon = isHidden
|
|
? <MenuIcon className="floating-btn" />
|
|
: <XIcon className="floating-btn" />;
|
|
|
|
return (
|
|
<div className={props.className}>
|
|
<div className={`transition-all ${buttonListClasses}`}>
|
|
{ props.children }
|
|
</div>
|
|
<button
|
|
className={'transition-all w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
|
|
title='Open menu'
|
|
onClick={() => toggleState(isHidden, setHidden)}
|
|
>
|
|
{ icon }
|
|
</button>
|
|
</div>);
|
|
};
|
|
|
|
export default FloatingButton;
|