Aarni Halinen
48 lines
874 B
TypeScript
48 lines
874 B
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import colors from "@theme/colors";
|
|
import breakpoints from "@theme/breakpoints";
|
|
|
|
interface HeroPrimarySectionProps {
|
|
header: string;
|
|
text?: string;
|
|
}
|
|
|
|
const Section = styled.section`
|
|
max-width: 50%;
|
|
margin: 10vh auto 0;
|
|
text-align: center;
|
|
|
|
@media screen and (max-width: ${breakpoints.mobile}) {
|
|
max-width: unset;
|
|
}
|
|
|
|
p {
|
|
margin: 1em auto;
|
|
font-weight: 200;
|
|
}
|
|
|
|
a {
|
|
color: ${colors.blue1};
|
|
font-weight: 600;
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
color: ${colors.white};
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const HeroPrimarySection: React.FC<HeroPrimarySectionProps> = ({ header, text, children }) => (
|
|
<Section>
|
|
<h1>{header}</h1>
|
|
{text && (
|
|
<p>{text}</p>
|
|
)}
|
|
{children}
|
|
</Section>
|
|
);
|
|
|
|
export default HeroPrimarySection;
|