Aarni Halinen
111 lines
2.0 KiB
TypeScript
111 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { Link } from "@components/index";
|
|
import colors from "@theme/colors";
|
|
import breakpoints from "@theme/breakpoints";
|
|
|
|
interface HeroAsideItemProps {
|
|
header: string;
|
|
text?: string;
|
|
link: string;
|
|
linkText: string;
|
|
}
|
|
|
|
const Article = styled.article`
|
|
margin-top: 1rem;
|
|
`;
|
|
|
|
export const HeroAsideItem: React.FC<HeroAsideItemProps> = ({
|
|
header, text, link, linkText,
|
|
}) => (
|
|
<Article>
|
|
<h2>{header}</h2>
|
|
{text && (
|
|
<p>{text}</p>
|
|
)}
|
|
<Link to={link}>
|
|
<h6>
|
|
{linkText}
|
|
</h6>
|
|
</Link>
|
|
</Article>
|
|
);
|
|
|
|
type Colors = "darkBlue" | "lightTurquoise";
|
|
|
|
interface HeroAsideProps {
|
|
bgColor: Colors;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
// TODO: Color combos
|
|
const Aside = styled.aside<{ colors: string }>`
|
|
${(p) => p.colors}
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 6rem;
|
|
align-items: center;
|
|
width: 45%;
|
|
|
|
@media screen and (max-width: ${breakpoints.mobile}) {
|
|
width: unset;
|
|
padding: 3rem 2rem;
|
|
}
|
|
|
|
& > div {
|
|
h2 {
|
|
word-break: break-word;
|
|
hyphens: auto;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
& > p {
|
|
font-weight: 600;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
a {
|
|
line-height: 2rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
letter-spacing: 0.1rem;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const textColors = (bgColor: Colors) => {
|
|
switch (bgColor) {
|
|
case "darkBlue":
|
|
return `
|
|
background-color: ${colors[bgColor]};
|
|
color: ${colors.lightBlue};
|
|
`;
|
|
case "lightTurquoise":
|
|
return `
|
|
background-color: ${colors[bgColor]};
|
|
color: ${colors.darkBlue};
|
|
`;
|
|
default: return "";
|
|
}
|
|
};
|
|
|
|
const HeroAside: React.FC<HeroAsideProps> = ({ bgColor, children }) => (
|
|
<Aside colors={textColors(bgColor)}>
|
|
<div>
|
|
{children}
|
|
</div>
|
|
</Aside>
|
|
);
|
|
|
|
export default HeroAside;
|