125 lines
2.7 KiB
TypeScript
125 lines
2.7 KiB
TypeScript
import * as React from 'react'
|
|
import styled from 'styled-components'
|
|
import { ImArrowRight } from 'react-icons/im'
|
|
import type { IconType } from 'react-icons'
|
|
|
|
import type { ArtProps, ReasonProps, FeatureProps } from '../types'
|
|
|
|
export const CenteredText = styled.p`
|
|
text-align: center;
|
|
max-width: 300px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
font-size: 1.2rem;
|
|
line-height: 1;
|
|
font-family:
|
|
'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
|
|
sans-serif;
|
|
`
|
|
export const Art = styled.img.attrs<ArtProps>((props) => ({
|
|
alt: props.info || '',
|
|
title: props.info || ''
|
|
}))`
|
|
max-width: 100%;
|
|
height: auto;
|
|
`
|
|
|
|
const ArrowHolder = styled.div<{ bgColor?: string }>`
|
|
display: inline-block;
|
|
border-radius: 50px;
|
|
padding: 15px 17px;
|
|
color: white;
|
|
background-color: ${(props) =>
|
|
props.bgColor === 'red' ? '#ed1c1c' : '#90c445'};
|
|
`
|
|
const RightArrow: React.FC<{ bgColor?: string }> = ({ bgColor = '' }) => (
|
|
<ArrowHolder bgColor={bgColor}>
|
|
<ImArrowRight size={24} />
|
|
</ArrowHolder>
|
|
)
|
|
const ReasonDesc = styled.p`
|
|
display: inline-block;
|
|
width: calc(100% - 60px);
|
|
vertical-align: top;
|
|
margin: 20px 0 0;
|
|
min-height: 60px;
|
|
line-height: 1;
|
|
padding-left: 20px;
|
|
text-transform: uppercase;
|
|
`
|
|
|
|
export const Reason: React.FC<ReasonProps> = ({ text, bgColor = '' }) => (
|
|
<>
|
|
<RightArrow bgColor={bgColor} />
|
|
<ReasonDesc>{text}</ReasonDesc>
|
|
</>
|
|
)
|
|
|
|
const IconHolderStyled = styled.div`
|
|
display: inline-block;
|
|
border: 1px solid #314351;
|
|
color: #314351;
|
|
border-radius: 50px;
|
|
padding: 15px 17px;
|
|
vertical-align: top;
|
|
`
|
|
|
|
const IconHolder = ({ Icon }: { Icon: IconType }) => {
|
|
return (
|
|
<IconHolderStyled>
|
|
<Icon size={24} />
|
|
</IconHolderStyled>
|
|
)
|
|
}
|
|
|
|
const FeatureDetails = styled.div`
|
|
display: inline-block;
|
|
width: calc(100% - 60px);
|
|
padding-left: 20px;
|
|
margin-bottom: 20px;
|
|
`
|
|
const FeatureTitle = styled.h5`
|
|
font-family:
|
|
'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
|
|
sans-serif;
|
|
text-transform: uppercase;
|
|
`
|
|
const FeatureDesc = styled.p`
|
|
opacity: 0.5;
|
|
font-size: 0.9rem;
|
|
`
|
|
|
|
export const Feature: React.FC<FeatureProps> = ({
|
|
title,
|
|
desc,
|
|
Icon,
|
|
className
|
|
}) => (
|
|
<div className={className ?? 'col-md-4'}>
|
|
<IconHolder Icon={Icon} />
|
|
<FeatureDetails>
|
|
<FeatureTitle>{title}</FeatureTitle>
|
|
<FeatureDesc>{desc}</FeatureDesc>
|
|
</FeatureDetails>
|
|
</div>
|
|
)
|
|
|
|
export const ThumbnailWrapper = styled.div`
|
|
-webkit-box-flex: 0;
|
|
flex: 0 0 33.3333%;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
max-width: 33.3333%;
|
|
@media (min-width: 576px) {
|
|
flex-basis: 25%;
|
|
max-width: 25%;
|
|
}
|
|
cursor: pointer;
|
|
&:hover {
|
|
opacity: 0.5;
|
|
}
|
|
`
|