Created
May 24, 2019 04:53
-
-
Save sisi-sh/ab43d5d580f88a17f300882517f42f0f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react" | |
| import { Link } from "gatsby" | |
| import styled from "styled-components" | |
| import tw from "tailwind.macro" | |
| // Arrow components | |
| import DownGold from "../../images/icons/arrow/Down-gold.svg" | |
| import RightGold from "../../images/icons/arrow/Right-gold.svg" | |
| import DownPurple from "../../images/icons/arrow/Down-purple.svg" | |
| import RightPurple from "../../images/icons/arrow/Right-purple.svg" | |
| import DownWhite from "../../images/icons/arrow/Down-white.svg" | |
| import RightWhite from "../../images/icons/arrow/Right-white.svg" | |
| // Abstract Button | |
| const ArrowContainer = styled.span` | |
| svg { | |
| height: 20px; | |
| width: 20px; | |
| margin-left: 5px; | |
| } | |
| ` | |
| const AbstractButton = ({ className, as, to, children, arrow, color }) => { | |
| let ArrowPath = RightGold | |
| if (arrow) { | |
| switch (arrow) { | |
| case "RightPurple": | |
| ArrowPath = RightPurple | |
| break | |
| case "DownPurple": | |
| ArrowPath = DownPurple | |
| break | |
| case "RightGold": | |
| ArrowPath = RightGold | |
| break | |
| case "DownGold": | |
| ArrowPath = DownGold | |
| break | |
| case "RightWhite": | |
| ArrowPath = RightWhite | |
| break | |
| case "DownWhite": | |
| ArrowPath = DownWhite | |
| break | |
| default: | |
| ArrowPath = null | |
| } | |
| } else ArrowPath = null | |
| console.log("Yoted " + ArrowPath) | |
| return ( | |
| <ArrowContainer | |
| className={className} | |
| as={as} | |
| css={tw`text-${color}`} | |
| to={to} | |
| > | |
| <span>{children}+ zzz</span> | |
| <span>{ArrowPath != null && <ArrowPath />}</span> | |
| </ArrowContainer> | |
| ) | |
| } | |
| // Button Styles | |
| const ButtonFill = styled(AbstractButton)` | |
| display: table; | |
| ${tw`text-purple bg-gold font-bodyBold`} | |
| box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2); | |
| padding: 18px 26px 8px 14px; | |
| ` | |
| const ButtonText = styled(AbstractButton)` | |
| display: table; | |
| ${tw`text-gold font-bodyBold`} | |
| background: none; | |
| border: none; | |
| padding: 15px 0; | |
| ` | |
| // ——— | |
| const Button = props => { | |
| let newAs | |
| let { buttonstyle, as } = props | |
| // if "as" is "link", asign it Gatsby Link object so it works correctly | |
| if (as) { | |
| if (as === "link" || as === "Link") newAs = Link | |
| else newAs = as | |
| } else newAs = "button" | |
| // 1. decides button style based on buttonstyle prop, | |
| // 2. generates it, | |
| // 3. returns it | |
| if (buttonstyle) { | |
| switch (buttonstyle) { | |
| case "text": | |
| return <ButtonText {...props} as={newAs} /> | |
| default: | |
| return <ButtonFill {...props} as={newAs} /> | |
| } | |
| } else return <ButtonFill {...props} as={newAs} /> | |
| } | |
| export default Button |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment