created new float button component

src/components/common/FloatingMenu.css

@@ -0,0 +1,35 @@
+
+.fab-container {
+  position: fixed;
+  bottom: 35px;
+  right: 30px;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
+
+.fab-main {
+  /* width: 45px;
+  height: 45px;
+  border-radius: 100%;
+  background-color: #0d6efd;
+  color: white;
+  border: none; */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  /* font-size: 24px; */
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.fab-option {
+  pointer-events: auto;
+  margin-bottom: 10px;
+}
+@media (max-width: 768px) {
+  .fab-container {
+    right: 20px;
+    left: 50%;
+    bottom: 20px;
+  }
+}

src/components/common/FloatingMenu.jsx

@@ -0,0 +1,33 @@
+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-label-${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;
+