Abstraction for Display Button

[jasonchristopher21]

Hi all! In my recent PR that has been merged [#25], I added a component called DisplayButton.jsx, which contains an abstraction for generating huge buttons in each section such as those in the Figma prototype.

To use the button, you can import the DisplayButton component from index.js in the components directory.

import { DisplayButton } from "./index";

The DisplayButton component has three properties:

• link: Specifies the link when the button is clicked. e.g. link="/#contact"
• text: Specifies the placeholder text in the button. e.g. text="submit"
• arrow: Specifies whether the arrow variant.
  • arrow="right" specifies a button with right arrow
  • arrow="left" specifies a button with left arrow
  • arrow="none" or not specifying the arrow property specifies a button with no arrows

Details on the three arrow variants are as follows:

• Left Arrow variant

<DisplayButton link="/#problems" text="Back to Statements" arrow="left" />

• Right Arrow variant

<DisplayButton link="/" text="View Past Statements" arrow="right" />

• No Arrow variant

<DisplayButton link="/" text="Back to Home" arrow="none" />
<DisplayButton link="/" text="Sample" />

Feel free to add any modification or suggestions. Hope you may find this abstraction helpful in the components that you will be working on in the future. Happy coding! 😄