91 lines
2.0 KiB
TypeScript
91 lines
2.0 KiB
TypeScript
import * as React from 'react'
|
|
import styled from 'styled-components'
|
|
|
|
import type { SolidButtonProps, OutlineButtonProps } from '../../types'
|
|
|
|
const BottomArrow = styled.div`
|
|
width: 50px;
|
|
height: 50px;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
background: inherit;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
left: 50%;
|
|
z-index: 10;
|
|
`
|
|
const BottomArrowWrapper = styled.div`
|
|
width: 100%;
|
|
height: 20px;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
margin-top: 50px;
|
|
background-color: inherit;
|
|
`
|
|
|
|
export const BottomSectionArrow = () => (
|
|
<BottomArrowWrapper>
|
|
<BottomArrow />
|
|
</BottomArrowWrapper>
|
|
)
|
|
|
|
export const SectionHeading = styled.h2<{ center?: string }>`
|
|
text-align: ${(props) => (props.center === 'no' ? 'left' : 'center')};
|
|
letter-spacing: 1px;
|
|
font-weight: 400;
|
|
font-family:
|
|
'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
|
|
sans-serif;
|
|
text-transform: uppercase;
|
|
`
|
|
|
|
export const SectionDesc = styled.p<{ center?: string; opacity?: string }>`
|
|
text-align: ${(props) => (props.center === 'no' ? 'left' : 'center')};
|
|
opacity: ${(props) => props.opacity ?? 0.6};
|
|
a {
|
|
color: inherit;
|
|
}
|
|
`
|
|
const StyledSolidButton = styled.button`
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 0.75rem;
|
|
border-width: 2px;
|
|
width: 100%;
|
|
max-width: 250px;
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
&.btn-dark {
|
|
background-color: #2e4252;
|
|
}
|
|
`
|
|
|
|
export const SolidButton: React.FC<SolidButtonProps> = ({
|
|
children,
|
|
theme = 'light',
|
|
type = 'submit',
|
|
disabled = false,
|
|
onClick
|
|
}) => (
|
|
<StyledSolidButton
|
|
type={type}
|
|
className={`btn btn-${theme}`}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
>
|
|
{children}
|
|
</StyledSolidButton>
|
|
)
|
|
|
|
const StyledOutlineButton = styled.button`
|
|
margin: 50px 0;
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 0.75rem;
|
|
border-width: 2px;
|
|
`
|
|
|
|
export const OutlineButton: React.FC<OutlineButtonProps> = ({ children }) => (
|
|
<StyledOutlineButton type="button" className="btn btn-outline-light">
|
|
{children}
|
|
</StyledOutlineButton>
|
|
)
|