Aarni Halinen
119 lines
2.4 KiB
TypeScript
119 lines
2.4 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import colors from "@theme/colors";
|
|
import { Link } from "@components/index";
|
|
|
|
type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise" | "sik100Blue";
|
|
|
|
const textColors = (bgColor: Colors) => {
|
|
switch (bgColor) {
|
|
case "orange1": return (
|
|
`
|
|
color: ${colors.white};
|
|
background-color: ${colors[bgColor]};
|
|
a:hover {
|
|
color: ${colors.darkBlue};
|
|
}
|
|
`
|
|
);
|
|
case "sik100Blue": return (
|
|
`
|
|
background-color: ${colors[bgColor]};
|
|
color: ${colors.sik100Gold};
|
|
`
|
|
);
|
|
case "darkBlue": return (
|
|
`
|
|
background-color: ${colors[bgColor]};
|
|
color: ${colors.white};
|
|
`
|
|
);
|
|
|
|
case "lightBlue": return (
|
|
`
|
|
background-color: ${colors[bgColor]};
|
|
color: ${colors.darkBlue};
|
|
a:hover {
|
|
color: ${colors.white};
|
|
}
|
|
`
|
|
);
|
|
|
|
case "lightTurquoise": return (
|
|
`
|
|
background-color: ${colors[bgColor]};
|
|
color: ${colors.darkBlue};
|
|
a:hover {
|
|
color: ${colors.white};
|
|
}
|
|
`
|
|
);
|
|
case "blue1": return (
|
|
`
|
|
background-color: ${colors[bgColor]};
|
|
color: ${colors.white};
|
|
a:hover {
|
|
color: ${colors.darkBlue};
|
|
}
|
|
`
|
|
);
|
|
default: return "";
|
|
}
|
|
};
|
|
|
|
const Section = styled.section<{ bgColor: Colors }>`
|
|
${({ bgColor }) => textColors(bgColor)}
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
align-items: baseline;
|
|
padding: 2rem 0;
|
|
border: 0.5rem ${colors.sik100Gold};
|
|
flex-flow: row wrap;
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
& > a {
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
margin: 0.5rem 1rem 0;
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1rem;
|
|
}
|
|
|
|
& > h1 {
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
interface CTASectionProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
bgColor?: Colors;
|
|
link?: string;
|
|
linkText?: string;
|
|
}
|
|
|
|
const CTASection: React.FC<CTASectionProps> = ({
|
|
bgColor = "orange1", link, linkText, children, ...props
|
|
}) => (
|
|
<Section bgColor={bgColor} {...props}>
|
|
<h1>{children}</h1>
|
|
{link && (
|
|
<Link to={link}>
|
|
<h4>{linkText}</h4>
|
|
</Link>
|
|
)}
|
|
</Section>
|
|
);
|
|
|
|
export default CTASection;
|