add learn road safety

src/components/dashboard/roadSafety/operator/Learn/index.jsx

@@ -0,0 +1,39 @@
+"use client";
+import { useTheme } from "@emotion/react";
+import { OndemandVideo } from "@mui/icons-material";
+import { Button, IconButton, useMediaQuery } from "@mui/material";
+
+const Learn = () => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+    const handleClick = () => {
+        const link = document.createElement("a");
+        link.href = `/v3/learn-road-safety.mp4`;
+        link.download = "آموزش بخش نگهداری حریم راه - سامانه جامع راهداری.mp4";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+
+    return (
+        <>
+            {isMobile ? (
+                <IconButton aria-label="آموزش" color="warning" onClick={handleClick}>
+                    <OndemandVideo sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    size={"small"}
+                    variant="outlined"
+                    color="warning"
+                    startIcon={<OndemandVideo />}
+                    onClick={handleClick}
+                >
+                    آموزش
+                </Button>
+            )}
+        </>
+    );
+};
+export default Learn;

src/components/dashboard/roadSafety/operator/Toolbar.jsx

@@ -2,6 +2,7 @@ import { Stack } from "@mui/material";
 import StepOne from "./Form/StepOne";
 import PrintExcel from "./ExcelPrint";
 import { usePermissions } from "@/lib/hooks/usePermissions";
+import Learn from "./Learn";
 
 const Toolbar = ({ table, filterData, mutate }) => {
     const { data: userPermissions } = usePermissions();
@@ -10,6 +11,7 @@ const Toolbar = ({ table, filterData, mutate }) => {
         <Stack direction={"row"} spacing={1}>
             <PrintExcel filterData={filterData} table={table} />
             {hasCreatePermission && <StepOne mutate={mutate} />}
+            <Learn />
         </Stack>
     );
 };

src/components/dashboard/roadSafety/supervisor/Learn/index.jsx

@@ -0,0 +1,39 @@
+"use client";
+import { useTheme } from "@emotion/react";
+import { OndemandVideo } from "@mui/icons-material";
+import { Button, IconButton, useMediaQuery } from "@mui/material";
+
+const Learn = () => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+    const handleClick = () => {
+        const link = document.createElement("a");
+        link.href = `/v3/learn-road-safety.mp4`;
+        link.download = "آموزش بخش نگهداری حریم راه - سامانه جامع راهداری.mp4";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+
+    return (
+        <>
+            {isMobile ? (
+                <IconButton aria-label="آموزش" color="warning" onClick={handleClick}>
+                    <OndemandVideo sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    size={"small"}
+                    variant="outlined"
+                    color="warning"
+                    startIcon={<OndemandVideo />}
+                    onClick={handleClick}
+                >
+                    آموزش
+                </Button>
+            )}
+        </>
+    );
+};
+export default Learn;

src/components/dashboard/roadSafety/supervisor/Toolbar.jsx

@@ -1,10 +1,12 @@
 import { Stack } from "@mui/material";
 import PrintExcel from "./ExcelPrint";
+import Learn from "./Learn";
 
 const Toolbar = ({ table, filterData, mutate }) => {
     return (
         <Stack direction={"row"} spacing={1}>
             <PrintExcel filterData={filterData} table={table} />
+            <Learn />
         </Stack>
     );
 };