You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.2 KiB
81 lines
2.2 KiB
// components |
|
import styled from "styled-components"; |
|
import Wrapper from "components/header/Wrapper"; |
|
import Layout, { AutoLayout } from "components/header/Layout"; |
|
import Logo from "components/header/Logo"; |
|
import Item from "components/footer/Item"; |
|
|
|
const Header = ({ |
|
onNavToggle, |
|
onOptionToggle, |
|
onLearningToggle, |
|
title, |
|
}: Props) => { |
|
return ( |
|
<Wrapper> |
|
<Layout> |
|
<AutoLayout style={{ backgroundColor: "#009AA8" }}> |
|
<nav style={{ display: "flex", marginLeft: "16px" }}> |
|
<Img |
|
src="/react-epub-viewer/images/Setting.svg" |
|
onClick={onOptionToggle as any} |
|
alt="Logo" |
|
/> |
|
<Img |
|
src="/react-epub-viewer/images/Edit.svg" |
|
alt="Logo" |
|
onClick={onLearningToggle as any} |
|
/> |
|
</nav> |
|
<nav> |
|
<Button>خرید کتاب</Button> |
|
</nav> |
|
<nav |
|
style={{ |
|
display: "flex", |
|
marginRight: "16px", |
|
alignItems: "center", |
|
}} |
|
> |
|
<Item text={title as any} /> |
|
<span style={{ color: "#fff", marginRight: "10px" }}>||</span> |
|
<p style={{ margin: "0", color: "#fff" }}>نام کتاب </p> |
|
<Logo /> |
|
<Img |
|
src="/react-epub-viewer/images/menu.svg" |
|
onClick={onNavToggle as any} |
|
alt="Logo" |
|
/> |
|
</nav> |
|
{/* <ControlBtn massege="فهرست" onClick={onNavToggle} /> */} |
|
{/* <ControlBtn massege="تنظیمات" onClick={onOptionToggle} /> |
|
<ControlBtn massege="نشانه گذاری" onClick={onLearningToggle} /> */} |
|
</AutoLayout> |
|
</Layout> |
|
</Wrapper> |
|
); |
|
}; |
|
|
|
const Button = styled.button` |
|
display: flex; |
|
margin-top: 11px; |
|
border-radius: 5px; |
|
border: solid 2px #fff; |
|
padding: 3px 2rem; |
|
color: #fff; |
|
font-family: inherit; |
|
`; |
|
|
|
const Img = styled.img` |
|
width: 25px; |
|
|
|
`; |
|
interface Props { |
|
title: String; |
|
onNavToggle: (value?: boolean) => void; |
|
onOptionToggle: (value?: boolean) => void; |
|
onLearningToggle: (value?: boolean) => void; |
|
// setsettingicon: (value?: boolean) => void; |
|
} |
|
|
|
export default Header;
|
|
|