34 lines
957 B
JavaScript
34 lines
957 B
JavaScript
import React, { useState } from "react";
|
|
import {useFab} from "../../Context/FabContext";
|
|
import './FloatingMenu.css'
|
|
|
|
const FloatingMenu = () => {
|
|
const { actions } = useFab();
|
|
const [open, setOpen] = useState(false);
|
|
if (actions.length === 0) return null;
|
|
|
|
return (
|
|
<div className="fab-container">
|
|
{open &&
|
|
actions.map((action, index) => (
|
|
<button
|
|
key={index}
|
|
className={`badge bg-${action.color} rounded-pill mb-2 d-inline-flex align-items-center gap-2 px-3 py-1 cursor-pointer fab-option`}
|
|
onClick={action.onClick}
|
|
title={action.label}
|
|
>
|
|
<i className={action.icon}></i>
|
|
<span>{action.label}</span>
|
|
</button>
|
|
))}
|
|
|
|
<button type="button" className="btn btn-lg btn-icon rounded-pill me-2 btn-primary fab-main " onClick={() => setOpen(!open)}>
|
|
<span className={`bx ${open ? "bx-x" : "bx-plus"}`}></span>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FloatingMenu;
|
|
|