134 lines
2.8 KiB
JavaScript
134 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
import { Box } from 'reflexbox';
|
|
import { Link } from 'gatsby';
|
|
|
|
import { H3, H2, H4, TextLight, Text } from 'components/Typo';
|
|
import {
|
|
px,
|
|
getThemeColor,
|
|
getThemeSpacePx,
|
|
rgba,
|
|
device,
|
|
} from 'utils/css-utils';
|
|
|
|
const Wrapper = styled(Box)`
|
|
border-radius: 6px;
|
|
background: ${(props) =>
|
|
props.isDark
|
|
? props.theme.colors.dark.cardBackground
|
|
: props.theme.colors.light.background};
|
|
background-image: ${(props) =>
|
|
props.imgSrc ? `url(${props.imgSrc})` : 'none'};
|
|
background-repeat: no-repeat;
|
|
background-position: ${(props) => props.imgPosition};
|
|
color: ${(p) => p.theme.colors[p.isDark ? 'dark' : 'light'].text};
|
|
background-size: cover;
|
|
flex-grow: 1;
|
|
height: 270px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&.scale {
|
|
transition: transform 200ms ease, box-shadow 200ms ease;
|
|
transform-style: preserve-3d;
|
|
backface-visibility: hidden;
|
|
|
|
&:hover {
|
|
transform-origin: center center;
|
|
transform: scale(1.02);
|
|
box-shadow: 0 2px 12px 2px rgba(0, 0, 0, 0.45);
|
|
}
|
|
}
|
|
|
|
&& {
|
|
a,
|
|
a:visited,
|
|
a:hover,
|
|
a:focus,
|
|
a:active {
|
|
color: ${(p) => p.theme.colors[p.isDark ? 'dark' : 'light'].text};
|
|
}
|
|
}
|
|
`;
|
|
|
|
const getTextShadow = (props) => {
|
|
const color = props.theme.colors[props.isDark ? 'light' : 'dark'].text;
|
|
const rgbaColor = rgba(color, props.isDark ? 0.2 : 0.8);
|
|
return `-1px 0 14px ${rgbaColor}, 0 1px 14px ${rgbaColor}, 1px 0 14px ${rgbaColor}, 0 -1px 14px ${rgbaColor};`;
|
|
};
|
|
|
|
const TextWrapper = styled.div`
|
|
padding: ${getThemeSpacePx(3)};
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
text-shadow: ${getTextShadow};
|
|
|
|
${H2} {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
${H3} {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
${TextLight} {
|
|
color: ${(p) =>
|
|
p.isDark
|
|
? getThemeColor('silverDarken30')
|
|
: getThemeColor('silverDarken60')};
|
|
}
|
|
|
|
${Text} {
|
|
color: ${(p) =>
|
|
p.isDark
|
|
? getThemeColor('silverDarken30')
|
|
: getThemeColor('silverDarken60')};
|
|
}
|
|
|
|
${H4} {
|
|
color: ${getThemeColor('silverDarken30')};
|
|
}
|
|
|
|
@media ${device.tablet} {
|
|
width: 50%;
|
|
}
|
|
`;
|
|
|
|
const ProjectTeaser = ({
|
|
kicker = '',
|
|
title = '',
|
|
text = '',
|
|
imgSrc = null,
|
|
isDark = false,
|
|
imgPosition = null,
|
|
imgSize = '100%',
|
|
slug = '/',
|
|
hoverEffect = null,
|
|
}) => {
|
|
const imagePosition = imgPosition ? imgPosition : 'center right';
|
|
|
|
return (
|
|
<Link to={slug}>
|
|
<Wrapper
|
|
imgSrc={imgSrc}
|
|
isDark={isDark}
|
|
imgPosition={imagePosition}
|
|
imgSize={imgSize}
|
|
className={hoverEffect}
|
|
>
|
|
<TextWrapper isDark={isDark}>
|
|
<TextLight>{kicker}</TextLight>
|
|
<H3 as="div">{title}</H3>
|
|
<Text as="div">{text}</Text>
|
|
</TextWrapper>
|
|
</Wrapper>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default ProjectTeaser;
|