UI Components

client/src/components/UI/Buttons/ActionButton/ActionButton.module.css

@@ -0,0 +1,31 @@
+.ActionButton {
+  /* background-color: var(--color-accent); */
+  border: 1.5px solid var(--color-accent);
+  border-radius: 4px;
+  color: var(--color-primary);
+  padding: 5px 15px;
+  transition: all 0.3s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 250px;
+  margin-right: 10px;
+  margin-bottom: 20px;
+}
+
+.ActionButton:hover {
+  background-color: var(--color-accent);
+  color: var(--color-background);
+  cursor: pointer;
+}
+
+.ActionButtonIcon {
+  --size: 20px;
+  width: var(--size);
+  height: var(--size);
+  /* display: flex; */
+}
+
+.ActionButtonName {
+  display: flex;
+}

client/src/components/UI/Buttons/ActionButton/ActionButton.tsx

@@ -0,0 +1,35 @@
+import { Fragment } from 'react';
+import { Link } from 'react-router-dom';
+
+import classes from './ActionButton.module.css';
+import Icon from '../../Icon/Icon';
+
+interface ComponentProps {
+  name: string;
+  icon: string;
+  link?: string;
+  handler?: () => void;
+}
+
+const ActionButton = (props: ComponentProps): JSX.Element => {
+  const body = (
+    <Fragment>
+      <div className={classes.ActionButtonIcon}>
+        <Icon icon={props.icon} />
+      </div>
+      <div className={classes.ActionButtonName}>
+        {props.name}
+      </div>
+    </Fragment>
+  );
+
+  if (props.link) {
+    return (<Link to={props.link}>{body}</Link>)
+  } else if (props.handler) {
+    return (<div className={classes.ActionButton} onClick={props.handler}>{body}</div>)
+  } else {
+    return (<div className={classes.ActionButton}>{body}</div>)
+  }
+}
+
+export default ActionButton;