diff --git a/client/src/Components/common/FloatingActionBar.tsx b/client/src/Components/common/FloatingActionBar.tsx new file mode 100644 index 000000000..0e1d9b46c --- /dev/null +++ b/client/src/Components/common/FloatingActionBar.tsx @@ -0,0 +1,84 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import { useTheme } from "@mui/material/styles"; +import Paper from "@mui/material/Paper"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import IconButton from "@mui/material/IconButton"; +import Slide from "@mui/material/Slide"; +import { X } from "lucide-react"; + +interface FloatingActionBarProps { + selectedCount: number; + onClearSelection: () => void; + children?: React.ReactNode; +} + +export const FloatingActionBar: React.FC = ({ + selectedCount, + onClearSelection, + children, +}) => { + const { t } = useTranslation(); + const theme = useTheme(); + const isOpen = selectedCount > 0; + + return ( + + + + + {selectedCount} {t("common.selected", { defaultValue: "selected" })} + + + + + + + {children && ( + + {children} + + )} + + + ); +}; diff --git a/client/src/Components/common/index.ts b/client/src/Components/common/index.ts index 4db9cac34..79a227699 100644 --- a/client/src/Components/common/index.ts +++ b/client/src/Components/common/index.ts @@ -3,3 +3,4 @@ export * from "./charts/HeatmapResponseTime"; export * from "./charts/HeatmapResponseTimeTooltip"; export * from "./controls/HeaderCreate"; export * from "./controls/HeaderTimeRange"; +export * from "./FloatingActionBar"; diff --git a/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx b/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx index 048998776..31b8b05c6 100644 --- a/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx +++ b/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx @@ -1,5 +1,6 @@ import Stack from "@mui/material/Stack"; import Box from "@mui/material/Box"; +import Checkbox from "@mui/material/Checkbox"; import Typography from "@mui/material/Typography"; import { Table,