diff --git a/public/images/reactEpubIcon.png b/public/images/reactEpubIcon.png new file mode 100644 index 0000000..1ba02c0 Binary files /dev/null and b/public/images/reactEpubIcon.png differ diff --git a/src/components/header/Logo.tsx b/src/components/header/Logo.tsx new file mode 100644 index 0000000..fd74471 --- /dev/null +++ b/src/components/header/Logo.tsx @@ -0,0 +1,35 @@ +import styled from 'styled-components' +// lib +import * as styles from 'lib/styles/styles' +import palette from 'lib/styles/palette' + +const Logo = () => { + return ( + + Logo + + ); +} + +const Wrapper = styled.a` + display: flex; + align-items: center; + justify-content: center; + outline: none; + margin-left: 16px; + background-color: rgba(0,0,0,0); + transition: .3s ${styles.transition}; + border-radius: 8px; + padding: 4px 8px; + cursor: pointer; + + &:focus, &:hover { + background-color: ${palette.blue1}; + } +`; + +const Img = styled.img` + height: 32px; +`; + +export default Logo \ No newline at end of file diff --git a/src/containers/Header.tsx b/src/containers/Header.tsx index a08194c..7b6f224 100644 --- a/src/containers/Header.tsx +++ b/src/containers/Header.tsx @@ -2,6 +2,7 @@ import { useState } from 'react' // components import Wrapper from 'components/header/Wrapper' import Layout, { AutoLayout } from 'components/header/Layout' +import Logo from 'components/header/Logo' import ControlBtn from 'components/header/ControlBtn' import ControlIconBtn from 'components/header/ControlIconBtn' import VerticalLine from 'components/header/VerticalLine' @@ -72,6 +73,7 @@ const Header = ({
+ diff --git a/src/index.tsx b/src/index.tsx index b8fb68c..2fa0ce3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,6 @@ import ReactDOM from 'react-dom'; import Reader from 'containers/Reader' -const EPUB_URL = "files/Alices Adventures in Wonderland.epub"; +const EPUB_URL = "react-epub-viewer/files/Alices Adventures in Wonderland.epub"; ReactDOM.render(, document.getElementById('root')); \ No newline at end of file