From d0c75cdeb1c1c8f15192d24b13d6589b61faf286 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 19:59:13 +0530
Subject: [PATCH] feat: coc action

---
 .../action-settings/clickOnCoordinates.tsx    | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/molecules/action-settings/clickOnCoordinates.tsx

diff --git a/src/components/molecules/action-settings/clickOnCoordinates.tsx b/src/components/molecules/action-settings/clickOnCoordinates.tsx
new file mode 100644
index 00000000..351e4297
--- /dev/null
+++ b/src/components/molecules/action-settings/clickOnCoordinates.tsx
@@ -0,0 +1,39 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { Stack, TextField } from "@mui/material";
+import { WarningText } from '../../atoms/texts';
+import InfoIcon from "@mui/icons-material/Info";
+
+export const ClickOnCoordinatesSettings = forwardRef((props, ref) => {
+  const [settings, setSettings] = React.useState<number[]>([0,0]);
+  useImperativeHandle(ref, () => ({
+    getSettings() {
+      return settings;
+    }
+  }));
+
+  return (
+    <Stack direction="column">
+      <TextField
+        sx={{marginLeft: '15px', marginRight: '15px'}}
+        type="number"
+        label="X"
+        onChange={(e) => setSettings(prevState => ([Number(e.target.value), prevState[1]]))}
+        required
+        defaultValue={settings[0]}
+      />
+      <TextField
+        sx={{margin: '15px'}}
+        type="number"
+        label="Y"
+        onChange={(e) => setSettings(prevState => ([prevState[0], Number(e.target.value)]))}
+        required
+        defaultValue={settings[1]}
+      />
+      <WarningText>
+        <InfoIcon color='warning'/>
+        The click function will click on the given coordinates.
+        You need to put the coordinates by yourself.
+      </WarningText>
+    </Stack>
+  );
+});