Aarni Halinen
34 lines
953 B
TypeScript
34 lines
953 B
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { ColorDivProps } from "../ColorDiv/ColorDiv";
|
|
import { ColorMapper } from "@theme/colors";
|
|
|
|
type AsideSectionProps = ColorDivProps;
|
|
|
|
const Section = styled.div<ColorDivProps>`
|
|
display: flex;
|
|
flex: 1;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
padding: 3rem 4rem;
|
|
|
|
color: ${(p) => p.textColor};
|
|
background-color: ${(p) => p.backgroundColor};
|
|
&:hover {
|
|
color: ${(p) => p.hoverColor};
|
|
background-color: ${(p) => p.hoverBackgroundColor};
|
|
}
|
|
`;
|
|
|
|
const AsideSection: React.FC<AsideSectionProps> = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => (
|
|
<Section
|
|
textColor={ColorMapper.get(textColor)}
|
|
backgroundColor={ColorMapper.get(backgroundColor)}
|
|
hoverColor={ColorMapper.get(hoverColor)}
|
|
hoverBackgroundColor={ColorMapper.get(backgroundHoverColor)}
|
|
{...props}
|
|
/>
|
|
);
|
|
|
|
export default AsideSection;
|