✨ Create IconButton UI component

src/components/UI/Button/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classes from './styles.module.scss';
 
 const Button: React.FC<ButtonProps> = (props) => {
-  const { children, className, ...restProps } = props;
+  const { children, className = '', ...restProps } = props;
 
   return (
     <button className={`${classes.button} ${className}`} {...restProps}>

src/components/UI/Button/styles.module.scss

@@ -16,4 +16,9 @@
     @include theme (color, contrast1);
     cursor: pointer;
   }
+
+  &:disabled {
+    cursor: auto;
+    filter: brightness(80%);
+  }
 }

src/components/UI/CodeBlock/index.tsx

@@ -4,6 +4,7 @@ import { monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { copyTextToClipboard } from '../../../utils';
 import ClipBoard from '../../Icons/Clipboard';
 import ClipBoardChecked from '../../Icons/ClipboardChecked';
+import IconButton from '../IconButton';
 import classes from './styles.module.scss';
 
 const CodeBlock: React.FC<CodeBlockProps> = (props) => {
@@ -36,9 +37,9 @@ const CodeBlock: React.FC<CodeBlockProps> = (props) => {
       >
         {codeString}
       </SyntaxHighlighter>
-      <div onClick={handleCopyClick}>
+      <IconButton onClick={handleCopyClick} className={classes.iconButton}>
         {isCopied ? <ClipBoardChecked /> : <ClipBoard />}
-      </div>
+      </IconButton>
     </section>
   );
 };

src/components/UI/CodeBlock/styles.module.scss

@@ -5,10 +5,10 @@
   display: flex;
   flex-direction: column;
 
-  & div {
+  & .iconButton {
     position: absolute;
-    right: 1rem;
-    top: 1.75rem;
+    right: 0.75rem;
+    top: 0.75rem;
   }
 }
 

src/components/UI/IconButton/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import classes from './styles.module.scss';
+
+const IconButton: React.FC<IconButtonProps> = (props) => {
+  const { children, size = 32, className = '', ...restProps } = props;
+
+  return (
+    <button className={`${classes.button} ${className}`} style={{ width: size, height: size }} {...restProps}>
+      {children}
+    </button>
+  );
+};
+
+export default IconButton;

src/components/UI/IconButton/styles.module.scss

@@ -0,0 +1,25 @@
+@import '../../../utils/mixins.scss';
+
+.button {
+  @include theme (background-color, iconButton);
+  border-radius: 50%;
+  border: none;
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: none;
+  filter: brightness(80%);
+
+  &:hover {
+    cursor: pointer;
+    filter: brightness(100%);
+    box-shadow: 0 4px 6px rgba($color: $black, $alpha: 0.25);
+  }
+
+  &:disabled {
+    cursor: auto;
+    filter: brightness(60%);
+    box-shadow: none;
+  }
+}

src/constants/theme.scss

@@ -15,6 +15,7 @@ $LIGHT: (
   contrast1: $black,
   contrast2: $dark,
   divider: rgba($color: $white, $alpha: 0.15),
+  iconButton: rgba($color: $black, $alpha: 0.1),
 );
 
 $DARK: (
@@ -23,6 +24,7 @@ $DARK: (
   contrast1: $white,
   contrast2: $light,
   divider: rgba($color: $black, $alpha: 0.15),
+  iconButton: rgba($color: $white, $alpha: 0.1),
 );
 
 $themes: ($LIGHT, $DARK);

src/index.scss

@@ -3,7 +3,7 @@
 *::after {
   margin: 0;
   box-sizing: border-box;
-  transition: all 0.25s;
+  transition: all 0.2s;
 }
 
 body {

src/types/props.d.ts

@@ -68,3 +68,8 @@ interface ClipboardProps {
   height?: number;
   width?: number;
 }
+
+interface IconButtonProps
+  extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    size?: number;
+  }