42 lines
844 B
TypeScript
42 lines
844 B
TypeScript
import styled from "@emotion/styled";
|
|
import React from "react";
|
|
import {
|
|
Link as RouterLink,
|
|
LinkProps as RouterLinkProps,
|
|
} from "react-router-dom";
|
|
|
|
const Headline = styled("h3")({
|
|
fontSize: "1.5rem",
|
|
lineHeight: 1,
|
|
marginBottom: "0.2rem",
|
|
});
|
|
|
|
const Link = styled(RouterLink)({
|
|
textDecoration: "none",
|
|
});
|
|
|
|
type NavigationHeadlineProps =
|
|
| (Partial<Pick<RouterLinkProps, "to">> & {
|
|
href?: undefined;
|
|
})
|
|
| {
|
|
href?: string;
|
|
to?: undefined;
|
|
};
|
|
|
|
const NavigationHeadline: React.FC<
|
|
React.PropsWithChildren<NavigationHeadlineProps>
|
|
> = (props) => {
|
|
const { children, href, to } = props;
|
|
|
|
return (
|
|
<Headline>
|
|
{to && <Link to={to}>{children}</Link>}
|
|
{href && <a href={href}>{children}</a>}
|
|
{!to && !href && children}
|
|
</Headline>
|
|
);
|
|
};
|
|
|
|
export default NavigationHeadline;
|