rewriting the component structure

2024-06-13 07:00:22 +00:00
parent 2318d92c3a
commit 809fc2c202
5 changed files with 235 additions and 110 deletions
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Box, Typography, Button, Switch, TextField } from '@mui/material';
+
+const EditComponent = ({ ruleName, description, content, setContent, lastEdited, editedBy, onSave }) => {
+
+  const handleSave = () => {
+    onSave(content);
+  };
+
+  return (
+    <Box sx={{ p: 2, border: '1px solid #ccc', borderRadius: 2, width: '100%' }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <Typography variant="body2" style={{ marginTop: '2%' }}>{ruleName}</Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Switch checked={true} />
+        </Box>
+      </Box>
+      <Typography variant="body2" style={{ marginTop: '2%' }}>
+          {description}
+        </Typography>
+      <Typography variant="body2" sx={{ mt: 1 }}>
+        Last edited: {lastEdited}
+      </Typography>
+      <Typography variant="body2">
+        Edited By: {editedBy}
+      </Typography>
+      <Box sx={{ mt: 2 }}>
+        <TextField
+          multiline
+          rows={12}
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          variant="outlined"
+          fullWidth
+        />
+      </Box>
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 2 }}>
+        <Button variant="contained" color="primary" onClick={handleSave}>
+          Save
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default EditComponent;