39 lines
931 B
JavaScript
39 lines
931 B
JavaScript
import React from "react";
|
|
import styled from "@emotion/styled";
|
|
import { withTheme } from "emotion-theming";
|
|
|
|
import { SIZES } from "../../styles/constants";
|
|
import Icon from "../Icon";
|
|
|
|
const SeekHeader = styled.header`
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
border-color: ${props => props.theme.colors.quarternary};
|
|
`;
|
|
const SeekH1 = styled.h1`
|
|
display: block;
|
|
font-size: ${SIZES.normal};
|
|
color: ${props => props.theme.colors.secondary};
|
|
`;
|
|
const SeekArrows = styled.div`
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
grid-gap: 10px;
|
|
`;
|
|
|
|
const Seek = ({ title = "", prev = "", next = "" }) => (
|
|
<SeekHeader>
|
|
<SeekH1>{title}</SeekH1>
|
|
<SeekArrows>
|
|
<Icon name="ChevronLeft" />
|
|
<Icon name="ChevronRight" />
|
|
</SeekArrows>
|
|
</SeekHeader>
|
|
);
|
|
|
|
export default withTheme(Seek);
|