From 89eea2d48235ffcece6a22ca7205e59b3b250104 Mon Sep 17 00:00:00 2001
From: EleanorMao <danningmao@outlook.com>
Date: Thu, 11 Apr 2024 17:20:40 +0800
Subject: [PATCH] feat:

---
 src/BotAddin.tsx    | 33 ++++++++++++++++++++++++++++++++-
 src/Editor.tsx      | 10 ++++------
 src/EmailSender.tsx | 23 ++++++++++++++++++++++-
 src/Script.tsx      | 17 ++++++++++++++++-
 4 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/src/BotAddin.tsx b/src/BotAddin.tsx
index b45dfaa..dec6cb4 100644
--- a/src/BotAddin.tsx
+++ b/src/BotAddin.tsx
@@ -1 +1,32 @@
-import React from 'react'
+import React, { ChangeEvent, FC } from 'react'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import TextField from '@mui/material/TextField'
+
+interface Value {
+	id: string
+	secret: string
+}
+
+export const BotAddin: FC<{
+	value: Value
+	onChange: (value: Value) => void
+}>
+= ({ value, onChange }) => {
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		onChange({
+			...value,
+			[e.target.name]: e.target.value
+		})
+	}
+	return (
+		<Paper>
+			<Typography variant="h6">RC Bot Add-in</Typography>
+			<Box>
+				<TextField label="RingCentral Client ID" name="id" onChange={handleChange} value={value.id} />
+				<TextField label="RingCentral Client Screct" name="screct" onChange={handleChange} value={value.secret} />
+			</Box>
+		</Paper>
+	)
+}
diff --git a/src/Editor.tsx b/src/Editor.tsx
index b44aba9..f74bffb 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -9,22 +9,20 @@
 import React, { useState } from 'react';
 import MonacoEditor from 'react-monaco-editor';
 
-export const Editor: React.FC = () => {
-	const [code, setCode] = useState(['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'))
-
-
+export const Editor: React.FC<{ value: string; onChange: (value: string) => void }> = ({ value, onChange }) => {
+	// const [code, setCode] = useState(['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'))
 	return (
 		<MonacoEditor
 			width="100%"
 			height="300"
 			language="javascript"
 			theme="vs-dark"
-			value={code}
+			value={value}
 			options={{
 				selectOnLineNumbers: true,
 				automaticLayout: true,
 			}}
-			onChange={setCode}
+			onChange={onChange}
 		/>
 	)
 };
diff --git a/src/EmailSender.tsx b/src/EmailSender.tsx
index b45dfaa..037dca4 100644
--- a/src/EmailSender.tsx
+++ b/src/EmailSender.tsx
@@ -1 +1,22 @@
-import React from 'react'
+import React, { ChangeEvent, FC } from 'react'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import TextField from '@mui/material/TextField'
+
+export const EmailSender: FC<{ value: string; onChange: (value: string) => void }> = ({ value, onChange }) => {
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		onChange(e.target.value)
+	}
+	return (
+		<Paper>
+			<Typography variant="h6">Email Sender</Typography>
+			<Box>
+				<TextField label="Email" placeholder="Please enter your email address" type="email"
+					value={value}
+					onChange={handleChange}
+				/>
+			</Box>
+		</Paper>
+	)
+}
diff --git a/src/Script.tsx b/src/Script.tsx
index b45dfaa..2dde949 100644
--- a/src/Script.tsx
+++ b/src/Script.tsx
@@ -1 +1,16 @@
-import React from 'react'
+import React, { FC } from 'react'
+import Box from '@mui/material/Box'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import { Editor } from './Editor'
+
+export const ScriptBlock: FC<{ value: string; onChange: (value: string) => void }> = (props) => {
+	return (
+		<Paper>
+			<Typography variant="h6">Script</Typography>
+			<Box>
+				<Editor {...props} />
+			</Box>
+		</Paper>
+	)
+}