Aarni Halinen
41 lines
727 B
TypeScript
41 lines
727 B
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { colors } from "@theme/colors";
|
|
|
|
interface HeroPrimarySectionProps {
|
|
header: string;
|
|
text?: string;
|
|
}
|
|
|
|
const Section = styled.section`
|
|
margin: 10vh auto 0;
|
|
text-align: center;
|
|
|
|
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; |