reusable buttons

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

@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiArrowDownCircle } from 'react-icons/fi';
+
+export default function CollapseIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiArrowDownCircle />}
+      colorScheme='orange'
+      variant={props.active ? 'solid' : 'outline'}
+      onClick={props.clickHandler}
+    />
+  );
+}

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

@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiSkipForward } from 'react-icons/fi';
+
+export default function NextIconBtn(props) {
+  return (
+    <IconButton
+      icon={<FiSkipForward />}
+      colorScheme= 'blackAlpha'
+      variant= 'outline'
+      onClick={props.clickHandler}
+      width={90}
+    />
+  );
+}

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

@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiPause } from 'react-icons/fi';
+
+export default function PauseIconBtn(props) {
+  return (
+    <IconButton
+      icon={<FiPause />}
+      colorScheme='orange'
+      variant={props.active ? 'solid' : 'outline'}
+      onClick={props.clickHandler}
+      width={90}
+    />
+  );
+}

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

@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiSkipBack } from 'react-icons/fi';
+
+export default function PrevIconBtn(props) {
+  return (
+    <IconButton
+      icon={<FiSkipBack />}
+      colorScheme= 'blackAlpha'
+      variant= 'outline'
+      onClick={props.clickHandler}
+      width={90}
+    />
+  );
+}

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

@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiClock } from 'react-icons/fi';
+
+export default function RollIconBtn(props) {
+  return (
+    <IconButton
+      icon={<FiClock />}
+      colorScheme='blue'
+      variant={props.active ? 'solid' : 'outline'}
+      onClick={props.clickHandler}
+      width={90}
+    />
+  );
+}

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

@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiPlay } from 'react-icons/fi';
+
+export default function StartIconBtn(props) {
+  return (
+    <IconButton
+      icon={<FiPlay />}
+      colorScheme='green'
+      variant={props.active ? 'solid' : 'outline'}
+      onClick={props.clickHandler}
+      width={90}
+    />
+  );
+}

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

@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiSun } from 'react-icons/fi';
+
+export default function VisibleIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiSun />}
+      colorScheme='blue'
+      variant={props.active ? 'solid' : 'outline'}
+      onClick={props.clickHandler}
+    />
+  );
+}