[#62] Refactor ScriptsPage

Refactor Scripts class component to functional ScriptsPage component.
Move to folder pages

src/Router.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Routes, BrowserRouter, Route } from "react-router-dom";
 import HomePage from "./pages/Home/HomePage.jsx";
 import Executions from "./components/Executions.jsx";
-import Scripts from "./components/Scripts.jsx";
+import ScriptsPage from "./pages/Script/ScriptsPage.jsx";
 import Dagre from "./components/dagre/Dagre.jsx";
 import NoMatch from "./components/NoMatch.jsx";
 import Layout from "./layouts/Layout.jsx";
@@ -13,7 +13,7 @@ const Router = () => {
       <Routes>
         <Route element={<Layout />}>
           <Route path="/" element={<HomePage />} />
-          <Route path="scripts" element={<Scripts />} />
+          <Route path="scripts" element={<ScriptsPage />} />
           <Route path="executions" element={<Executions />} />
           <Route path="script" element={<Dagre />} />
           <Route path="*" element={<NoMatch />} />

src/components/treebeard/ScriptsTree.jsx

@@ -101,8 +101,6 @@ class ScriptsTree extends React.Component {
     } else {
       return (
         <Fragment>
-          <h3>Scripts</h3>
-          <p>Right click on directory/file to add/remove file</p>
           <div style={styles.component}>
             <Treebeard
               data={this.state.data}

src/pages/Script/ScriptsPage.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Grid from "@mui/material/Grid2";
+import ScriptsTree from "../../components/treebeard/ScriptsTree.jsx";
+import { Typography } from "@mui/material";
+
+const ScriptsPage = () => {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12} sm={6}>
+        <Typography variant="h4" component="h3" gutterBottom>
+          Scripts
+        </Typography>
+        <Typography variant="body1" component="p" gutterBottom>
+          Right-click on directory/file to add/remove file
+        </Typography>
+        <ScriptsTree />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default ScriptsPage;