import React from "react"; import styled from "styled-components"; import { rhythm, scale } from "../utils/typography"; import { Link } from "gatsby"; import Logo from "../../content/assets/lesesalen-header.svg"; const getWeekNumber = () => { const now = new Date(); const januaryFirst = new Date(now.getFullYear(), 0, 1); return Math.ceil( ((now.valueOf() - januaryFirst.valueOf()) / 86400000 + januaryFirst.getDay() + 1) / 7 ); }; const Clock: React.FC = () => { const date = new Date(); return <time dateTime={date.toISOString()}>{date.toLocaleDateString()}</time>; }; const Week: React.FC = () => { const week = getWeekNumber(); return <span>week {week}</span>; }; const StyledDiv = styled.div` display: flex; flex-direction: column; justify-content: space-between; margin: 0 auto; `; export default function StyledHeader(): JSX.Element { return ( <StyledDiv> <h1 style={{ ...scale(1.3), marginBottom: rhythm(0), marginTop: 0, }} > <Link style={{ boxShadow: `none`, color: `inherit`, textDecoration: `none`, }} to={`/`} /> </h1> <Logo /> <> <p style={{ bottom: 0 }}> <Clock /> - <Week /> </p> </> </StyledDiv> ); }