refract make reusable components

client/src/common/components/buttons/AddIconBtn.jsx

@@ -0,0 +1,13 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiPlus } from "react-icons/fi";
+
+export default function AddIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiPlus />}
+      colorScheme='blue'
+      onClick={() => props.clickHandler}
+    />
+  );
+}

client/src/common/components/buttons/BlockIconBtn.jsx

@@ -0,0 +1,13 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiMinusCircle } from 'react-icons/fi';
+
+export default function BlockIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiMinusCircle />}
+      colorScheme='purple'
+      onClick={() => props.clickHandler}
+    />
+  );
+}

client/src/common/components/buttons/DelayIconBtn.jsx

@@ -0,0 +1,13 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiClock } from 'react-icons/fi';
+
+export default function DelayIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiClock />}
+      colorScheme='yellow'
+      onClick={() => props.clickHandler}
+    />
+  );
+}

client/src/common/components/buttons/DeleteIconBtn.jsx

@@ -0,0 +1,13 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiMinus } from 'react-icons/fi';
+
+export default function DeleteIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiMinus />}
+      colorScheme='red'
+      onClick={() => props.clickHandler}
+    />
+  );
+}

client/src/common/components/eventTimes/EventTimes.jsx

@@ -0,0 +1,24 @@
+import EditableTimer from '../../input/EditableTimer';
+import DelayValue from '../../input/DelayValue';
+
+export default function EventTimes(props) {
+  const { updateValues, delay, timeStart, timeEnd } = props;
+
+  return (
+    <>
+      <EditableTimer
+        name='timeStart'
+        updateValues={updateValues}
+        time={timeStart}
+        delay={delay}
+      />
+      <EditableTimer
+        name='timeEnd'
+        updateValues={updateValues}
+        time={timeEnd}
+        delay={delay}
+      />
+      <DelayValue delay={delay} />
+    </>
+  );
+}