feat: add subtext for action buttons

Author: anyulled

src/components/UI/Button.tsx

@@ -4,98 +4,100 @@ import {Color} from "../../styles/colors";
 import {BIG_BREAKPOINT} from "../../constants/BreakPoints";
 
 interface ButtonProps {
-  text: string;
+    text: string;
     subtext?: string;
-  link: string;
-  onClick: () => void;
-  disabled?: boolean;
-  target?: string;
-  children?: ReactNode;
+    link: string;
+    onClick: () => void;
+    disabled?: boolean;
+    target?: string;
+    children?: ReactNode;
 }
 
 const doNothingHandler = (
-  event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
 ) => {
-  event.preventDefault();
+    event.preventDefault();
 };
 
 const StyledActionButton = styled.div`
-  background-color: ${Color.LIGHT_BLUE};
-  text-align: center;
-  font-size: 1.3em;
-  min-width: 200px;
-  margin: 20px 5px;
-  border-radius: 5px;
-  box-shadow: 1px 1px 1px #000;
-  padding: 10px 15px;
-  transform: perspective(1px) translateZ(0);
-  transition-duration: 0.5s;
-  vertical-align: middle;
+    background-color: ${Color.LIGHT_BLUE};
+    text-align: center;
+    font-size: 1.3em;
+    min-width: 200px;
+    margin: 20px 5px;
+    border-radius: 5px;
+    box-shadow: 1px 1px 1px #000;
+    padding: 10px 15px;
+    transform: perspective(1px) translateZ(0);
+    transition-duration: 0.5s;
+    vertical-align: middle;
+    cursor: pointer;
 
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: ${Color.DARK_BLUE};
-    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
-  }
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: ${Color.DARK_BLUE};
+        transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
+    }
 
-  & span {
-    font-size: 0.9rem;
-  }
+    & span {
+        font-size: 0.9rem;
+    }
 
-  & a {
-    text-decoration: none;
-    text-shadow: 1px 1px 1px #000;
-    color: white;
-    display: block;
-    text-transform: uppercase;
-    vertical-align: middle;
-  }
+    & a {
+        text-decoration: none;
+        text-shadow: 1px 1px 1px #000;
+        color: white;
+        display: block;
+        text-transform: uppercase;
+        vertical-align: middle;
+    }
 
-  & small {
-    font-weight: bold;
-    font-size: 0.7em;
-    color: ${Color.MAGENTA};
-    text-shadow: none;
-  }
+    & small {
+        font-weight: bold;
+        font-size: 0.7em;
+        color: ${Color.MAGENTA};
+        text-shadow: none;
+    }
 
-  @media (max-width: ${BIG_BREAKPOINT}px) {
-    margin: 5px 1px;
-  }
+    @media (max-width: ${BIG_BREAKPOINT}px) {
+        margin: 5px 1px;
+    }
 `;
 
 const Button: FC<React.PropsWithChildren<ButtonProps>> = ({
-  text,
+                                                              text,
                                                               subtext = "SOON",
-  link,
-  onClick,
-  disabled,
-  target = "_blank",
-  children,
-}) => {
-  return (
-    <StyledActionButton className="hvr-bounce-in">
-      <>
-        <a
-          onClick={disabled ? doNothingHandler : onClick}
-          href={disabled ? "#top" : link}
-          target={target}
-          rel="noreferrer nofollow"
-          aria-disabled={disabled}
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            textDecoration: "none",
-            flexWrap: "wrap",
-          }}
-        >
-          {children}
-          <span>{`  ${text}`}</span>
-        </a>
-          {disabled && <small>{subtext}</small>}
-      </>
-    </StyledActionButton>
-  );
+                                                              link,
+                                                              onClick,
+                                                              disabled,
+                                                              target = "_blank",
+                                                              children,
+                                                          }) => {
+    return (
+        <StyledActionButton className="hvr-bounce-in">
+            <>
+                <a
+                    onClick={disabled ? doNothingHandler : onClick}
+                    className={disabled ? "disabled" : "active"}
+                    href={disabled ? "#top" : link}
+                    target={target}
+                    rel="noreferrer nofollow"
+                    aria-disabled={disabled}
+                    style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        textDecoration: "none",
+                        flexWrap: "wrap",
+                    }}
+                >
+                    {children}
+                    <span>{`  ${text}`}</span>
+                </a>
+                {disabled && <small>{subtext}</small>}
+            </>
+        </StyledActionButton>
+    );
 };
 export default Button;