49 lines
1.0 KiB
JavaScript
49 lines
1.0 KiB
JavaScript
import React from "react";
|
|
import styled from "@emotion/styled";
|
|
import { css } from "@emotion/react";
|
|
import { Link as GatsbyLink } from "gatsby";
|
|
|
|
const Container = styled.button`
|
|
background-color: var(--color-white);
|
|
color: var(--color-dark);
|
|
margin: 0;
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--color-dark);
|
|
font-size: var(--font-size-md);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
|
|
${(props) =>
|
|
props.float &&
|
|
css`
|
|
float: ${props.float};
|
|
`}
|
|
|
|
&:visited {
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
box-shadow: 0 0 0 2px var(--color-dark);
|
|
}
|
|
|
|
&:focus:not(:focus-visible) {
|
|
box-shadow: none;
|
|
}
|
|
`;
|
|
|
|
export default function Button({ children, to, ...other }) {
|
|
if (to) {
|
|
const isInternal = /^\/(?!\/)/.test(to);
|
|
const as = isInternal ? GatsbyLink : "a";
|
|
const url = isInternal ? { to } : { href: to };
|
|
return (
|
|
<Container as={as} {...url} {...other}>
|
|
{children}
|
|
</Container>
|
|
);
|
|
}
|
|
return <Container {...other}>{children}</Container>;
|
|
}
|