34 lines
1.1 KiB
TypeScript
34 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
|
|
}
|
|
|
|
function ToggleState(isHidden: boolean,
|
|
setHidden: React.Dispatch<React.SetStateAction<boolean>>): void {
|
|
setHidden(!isHidden);
|
|
}
|
|
|
|
export function FloatingButton(props: IFloatingButtonProps): JSX.Element {
|
|
const [isHidden, setHidden] = React.useState(true);
|
|
const buttonListClasses = isHidden ? 'invisible opacity-0' : 'visible opacity-100';
|
|
const icon = isHidden
|
|
? <MenuIcon className="floating-btn" />
|
|
: <XIcon className="floating-btn" />;
|
|
|
|
return (
|
|
<div className={`transition-all ${props.className}`}>
|
|
<div className={`transition-all flex flex-col gap-2 items-center ${buttonListClasses}`}>
|
|
{props.children}
|
|
</div>
|
|
<button type="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>);
|
|
}
|