Aarni Halinen
52 lines
1.0 KiB
TypeScript
52 lines
1.0 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import colors from "@theme/colors";
|
|
import Link from "@components/Link";
|
|
|
|
interface PageLinkProps {
|
|
to: string;
|
|
desc: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const StyledPageLink = styled.div`
|
|
border-left-color: ${colors.blue1};
|
|
border-left-width: 0.8rem;
|
|
border-left-style: solid;
|
|
margin: 0 1rem 1rem 0;
|
|
|
|
p {
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
color: ${colors.darkBlue};
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-weight: 800;
|
|
margin-left: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
margin-left: 1rem;
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
color: ${colors.blue1};
|
|
|
|
&:hover {
|
|
color: ${colors.darkBlue};
|
|
}
|
|
}
|
|
`;
|
|
|
|
const PageLink: React.FC<PageLinkProps> = ({ to, desc, children }) => (
|
|
<StyledPageLink>
|
|
<p>{children}</p>
|
|
<Link to={to}>{desc}</Link>
|
|
</StyledPageLink>
|
|
);
|
|
|
|
export default PageLink;
|