From e55d3b97fa1628d7304434c7a06367d67dfd551d Mon Sep 17 00:00:00 2001
From: hoseacodes <dominique11h@yahoo.com>
Date: Fri, 23 Feb 2024 21:29:56 -0600
Subject: [PATCH] fix(*): update ancor button

---
 src/Components/Button/AncorButton.jsx       | 60 +++++++++++++++++++++
 src/Components/Project/projectHighlight.jsx |  5 +-
 src/Pages/Home/Home.jsx                     | 14 ++---
 src/stories/AncorButton.stories.js          | 21 ++++++++
 4 files changed, 91 insertions(+), 9 deletions(-)
 create mode 100644 src/Components/Button/AncorButton.jsx
 create mode 100644 src/stories/AncorButton.stories.js

diff --git a/src/Components/Button/AncorButton.jsx b/src/Components/Button/AncorButton.jsx
new file mode 100644
index 00000000..f0a2f111
--- /dev/null
+++ b/src/Components/Button/AncorButton.jsx
@@ -0,0 +1,60 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { StyledButtonATag } from "../../Layout/Button/styledButton";
+
+export const AncorButton = ({
+    href,
+    target,
+    primary,
+    backgroundColor,
+    size,
+    shape,
+    label,
+    icon,
+    ...props
+}) => {
+  const mode = primary ? "button--primary" : "button--secondary";
+  return (
+    <StyledButtonATag
+      href={href}
+      target={target}
+      rel="noopener noreferrer"
+      className={[`button--${size}`, `button--${shape}`, mode].join(" ")}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+    >
+      {label && icon ? (
+        <>
+          {icon} {label}
+        </>
+      ) : label ? (
+        label
+      ) : (
+        icon
+      )}
+    </StyledButtonATag>
+  );
+};
+
+AncorButton.propTypes = {
+  primary: PropTypes.bool,
+  backgroundColor: PropTypes.string,
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  icon: PropTypes.element,
+  shape: PropTypes.oneOf(["round", "oval"]),
+  href: PropTypes.string.isRequired,
+  target: PropTypes.string.isRequired,
+};
+
+AncorButton.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: "medium",
+  onClick: undefined,
+  icon: null,
+  shape: "oval",
+  href: "google.com",
+  target: "_blank",
+};
diff --git a/src/Components/Project/projectHighlight.jsx b/src/Components/Project/projectHighlight.jsx
index b13fcff1..c4822dd6 100755
--- a/src/Components/Project/projectHighlight.jsx
+++ b/src/Components/Project/projectHighlight.jsx
@@ -4,7 +4,8 @@ import {projectData} from '../../Pages/Projects/ProjectsData';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
 import './projectHighlight.css'
-import { StyledButtonATag, StyledButtonH2, StyledDivButton } from '../../Layout/Button/styledButton';
+import { StyledButtonH2, StyledDivButton } from '../../Layout/Button/styledButton';
+import { AncorButton } from '../Button/AncorButton';
 
 function ProjectHighlight() {
   const highlights = projectData;
@@ -26,7 +27,7 @@ function ProjectHighlight() {
             )})}
             <StyledDivButton>
               <StyledButtonH2>Visit my portfolio for more</StyledButtonH2>
-              <StyledButtonATag href="http://www.dominiquehosea.com" rel="noopener noreferrer" target="_blank">My Portfolio</StyledButtonATag>
+              <AncorButton primary href="http://www.dominiquehosea.com" target="_blank" label="My Portfolio"/>
             </StyledDivButton>
         </div>
     )
diff --git a/src/Pages/Home/Home.jsx b/src/Pages/Home/Home.jsx
index 63333ea5..3637f219 100755
--- a/src/Pages/Home/Home.jsx
+++ b/src/Pages/Home/Home.jsx
@@ -8,7 +8,7 @@ import { MdEmail } from "react-icons/md";
 import ProjectHighlight from "../../Components/Project/projectHighlight";
 import Hero from "../../Components/Hero/hero";
 import { StyledHr } from "../../Layout/Hr/styledHr";
-import { StyledButtonATag } from "../../Layout/Button/styledButton";
+import { AncorButton } from "../../Components/Button/AncorButton";
 
 const Home = () => {
   return (
@@ -81,17 +81,17 @@ const Home = () => {
           </div>
           <StyledHr Primary />
           <br />
-          <div>
-            <StyledButtonATag
-              Primary
+          <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column'}}>
+            <AncorButton
+              primary
               href="#top"
+              target="_self"
+              label="Back to Top"
               data-aos="fade-right"
               data-aos-offset="200"
               data-aos-duration="3000"
               data-aos-easing="ease-in"
-            >
-              Back to the top
-            </StyledButtonATag>
+            />
           </div>
         </div>
       </section>
diff --git a/src/stories/AncorButton.stories.js b/src/stories/AncorButton.stories.js
new file mode 100644
index 00000000..f8cf3743
--- /dev/null
+++ b/src/stories/AncorButton.stories.js
@@ -0,0 +1,21 @@
+import { AncorButton } from '../Components/Button/AncorButton';
+
+export default {
+  title: "Main/Button/AncorTag",
+  component: AncorButton,
+  parameters: {
+    layout: "centered",
+    backgrounds: { default: "dark" },
+  },
+  tags: ["autodocs"],
+};
+
+export const Primary = {
+  args: {
+    href: "http://www.dominiquehosea.com",
+    primary: true,
+    target: "_blank",
+    label: 'Back to Top',
+  },
+};
+