Aarni Halinen
69 lines
1.2 KiB
TypeScript
69 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { colors } from "@theme/colors";
|
|
|
|
const Note = styled.span`
|
|
color: white;
|
|
transform-origin: right;
|
|
transform: rotate(-90deg);
|
|
height: fit-content;
|
|
text-transform: uppercase;
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
margin-right: 2rem;
|
|
margin-top: -0.5rem;
|
|
|
|
@media screen and (max-width: 800px) {
|
|
font-size: 1.25rem;
|
|
}
|
|
`;
|
|
|
|
const Item = styled.div`
|
|
display: flex;
|
|
text-align: left;
|
|
flex: 1 0;
|
|
margin: 1rem 2rem 1rem;
|
|
`;
|
|
|
|
interface HeroSecondarySectionItemProps {
|
|
note?: string;
|
|
}
|
|
|
|
export const HeroSecondarySectionItem: React.FC<HeroSecondarySectionItemProps> = ({note, children}) => (
|
|
<Item>
|
|
<Note>
|
|
{note}
|
|
</Note>
|
|
{children}
|
|
</Item>
|
|
)
|
|
|
|
const Section = styled.section`
|
|
background-color: ${colors.green1};
|
|
color: ${colors.darkBlue};
|
|
|
|
h1 {
|
|
padding: 1rem 0;
|
|
text-align: center;
|
|
}
|
|
`;
|
|
|
|
const Items = styled.div`
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
`;
|
|
|
|
interface HeroSecondarySectionProps {
|
|
heading: string;
|
|
}
|
|
|
|
const HeroSecondarySection: React.FC<HeroSecondarySectionProps> = ({ heading, children }) => (
|
|
<Section>
|
|
<h1>{heading}</h1>
|
|
<Items>
|
|
{children}
|
|
</Items>
|
|
</Section>
|
|
)
|
|
|
|
export default HeroSecondarySection; |