65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
"use client";
|
|
import { DashboardCard } from "@/components/card";
|
|
import { Fab } from "@mui/material";
|
|
import { MouseEventHandler, ReactNode } from "react";
|
|
|
|
import LanIcon from "@mui/icons-material/Lan";
|
|
import AppsIcon from "@mui/icons-material/Apps";
|
|
import DevicesIcon from "@mui/icons-material/Devices";
|
|
|
|
type Action = {
|
|
id: string;
|
|
icon: ReactNode;
|
|
label: ReactNode;
|
|
eventHandler: MouseEventHandler<HTMLButtonElement>;
|
|
};
|
|
|
|
export const QuickActions = () => {
|
|
const actions: Action[] = [
|
|
{
|
|
id: "network",
|
|
icon: <LanIcon sx={{ mr: 1 }} />,
|
|
label: "Network",
|
|
eventHandler: (event) => {
|
|
console.log({ event });
|
|
},
|
|
},
|
|
{
|
|
id: "apps",
|
|
icon: <AppsIcon sx={{ mr: 1 }} />,
|
|
label: "Apps",
|
|
eventHandler: (event) => {
|
|
console.log({ event });
|
|
},
|
|
},
|
|
{
|
|
id: "nodes",
|
|
icon: <DevicesIcon sx={{ mr: 1 }} />,
|
|
label: "Devices",
|
|
eventHandler: (event) => {
|
|
console.log({ event });
|
|
},
|
|
},
|
|
];
|
|
return (
|
|
<DashboardCard title="Quick Actions">
|
|
<div className="flex h-fit w-full items-center justify-start pt-5 align-bottom">
|
|
<div className="flex w-full flex-col flex-wrap justify-evenly gap-2 sm:flex-row">
|
|
{actions.map(({ id, icon, label, eventHandler }) => (
|
|
<Fab
|
|
className="w-fit self-center shadow-none"
|
|
color="secondary"
|
|
key={id}
|
|
onClick={eventHandler}
|
|
variant="extended"
|
|
>
|
|
{icon}
|
|
{label}
|
|
</Fab>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</DashboardCard>
|
|
);
|
|
};
|