diff --git a/web/e.cash/components/button/index.js b/web/e.cash/components/button/index.js new file mode 100644 --- /dev/null +++ b/web/e.cash/components/button/index.js @@ -0,0 +1,55 @@ +import { ButtonCtn, ButtonMain, ButtonInner } from './styles.js'; + +/****** +Button Props +text = String: the text that will be displayed in the button +link = String: the link for the button +corner = String: accepts "topLeft", "topRight", "bottomRight", "bottomLeft", clips the corner of the button +color = String: accepts "accent" or "white". If no option is given button defaults to primary theme color +glow = Boolean: adds a glow behind the button +******/ + +<Button text="Example Text" link="/" color="accent" glow />; + +export default function Button({ + text = 'Button', + link = '/', + corner = null, + color = null, + glow = false, +}) { + const corners = { + topLeft: { + outer: 'polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px)', + inner: 'polygon(19px 0, 100% 0, 100% 100%, 0 100%, 0 19px)', + }, + topRight: { + outer: 'polygon(0 0, calc(100% - 20px) 0%, 100% calc(0% + 20px), 100% 100%, 0 100%)', + inner: 'polygon(0 0, calc(100% - 19px) 0%, 100% calc(0% + 19px), 100% 100%, 0 100%)', + }, + bottomRight: { + outer: 'polygon(100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 0', + inner: 'polygon(100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%, 0 0', + }, + bottomLeft: { + outer: 'polygon(100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px), 0 0', + inner: 'polygon(100% 0, 100% 100%, 19px 100%, 0 calc(100% - 19px), 0 0', + }, + }; + return ( + <ButtonCtn color={color} glow={glow}> + <ButtonMain + href={link} + color={color} + style={corner ? { clipPath: corners[corner].outer } : null} + > + <ButtonInner + color={color} + style={corner ? { clipPath: corners[corner].inner } : null} + > + {text} + </ButtonInner> + </ButtonMain> + </ButtonCtn> + ); +} diff --git a/web/e.cash/components/button/styles.js b/web/e.cash/components/button/styles.js new file mode 100644 --- /dev/null +++ b/web/e.cash/components/button/styles.js @@ -0,0 +1,83 @@ +import styled from 'styled-components'; +import Link from 'next/link'; +import { stealth } from '/styles/theme'; + +export const ButtonCtn = styled.div` + ${props => + props.glow && + `filter: drop-shadow(0px 0px 10px ${ + props.color === 'accent' + ? props.theme.colors.accent + '90' + : props.color === 'white' + ? props.theme.colors.contrast + '90' + : props.theme.colors.primaryLight + '90' + });`} +`; + +export const ButtonMain = styled(Link)` + display: inline-flex; + padding: 2px; + align-items: center; + transition: all 300ms ease-in-out; + color: ${props => + props.color === 'accent' + ? props.theme.colors.accent + : props.color === 'white' + ? props.theme.colors.contrast + : props.theme.colors.primaryLight}; + font-size: 15px; + line-height: 1.5; + font-weight: 400; + letter-spacing: 1px; + background-color: ${props => + props.color === 'accent' + ? props.theme.colors.accent + : props.color === 'white' + ? props.theme.colors.contrast + : props.theme.colors.primaryLight}; + ${props => + props.theme === stealth + ? 'background-color: #fff !important; color: #fff !important; ' + : null}; +`; + +export const ButtonInner = styled.div` + background-color: ${props => props.theme.colors.darkBlue}; + padding: 16px 40px; + font-size: 15px; + line-height: 1.5; + font-weight: 500; + letter-spacing: 1px; + transition: all ease-in-out 150ms; + + &:hover { + box-shadow: inset 0 0 13px 2px + ${props => + props.color === 'accent' + ? props.theme.colors.accent + '90' + : props.color === 'white' + ? props.theme.colors.contrast + '90' + : props.theme.colors.primaryLight + '90'}; + animation: hoverbutton 150ms ease-in-out 1; + } + + @keyframes hoverbutton { + 0% { + background-color: ${props => + props.color === 'accent' + ? props.theme.colors.accent + : props.color === 'white' + ? props.theme.colors.contrast + : props.theme.colors.primaryLight} !important; + } + 100% { + background-color: unset; + } + } + ${props => props.theme.breakpoint.medium} { + .buttoninner { + padding: 14px 30px; + font-size: 14px; + } + } +`; diff --git a/web/e.cash/pages/index.js b/web/e.cash/pages/index.js --- a/web/e.cash/pages/index.js +++ b/web/e.cash/pages/index.js @@ -4,7 +4,8 @@ import VideoBackground from '/components/videobackground'; import GlitchText from '/components/glitch-text'; import { socials } from '/data/socials'; -import { Hero } from '/styles/pages/homepage'; +import { Hero, ButtonCtn } from '/styles/pages/homepage'; +import Button from '/components/button'; export default function Home() { return ( @@ -22,6 +23,14 @@ Experience the revolutionary new money powered by Avalanche. </p> + <ButtonCtn> + <Button + text="Avalanche Consensus" + link="https://avalanche.cash/" + color="white" + glow + /> + </ButtonCtn> <div className="social-ctn"> {socials.map(social => ( <Link diff --git a/web/e.cash/styles/pages/homepage.js b/web/e.cash/styles/pages/homepage.js --- a/web/e.cash/styles/pages/homepage.js +++ b/web/e.cash/styles/pages/homepage.js @@ -79,3 +79,9 @@ } } `; + +export const ButtonCtn = styled.div` + display: flex; + justify-content: center; + margin-top: 40px; +`;