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.
142 lines
5.5 KiB
142 lines
5.5 KiB
import React, { Component } from "react"; |
|
import Navbar from "../Home/Navbar/index"; |
|
import Footer from "../Home/Footer/index"; |
|
import { Link } from "react-router-dom"; |
|
import History from "./History/index"; |
|
|
|
import book1 from "../../assets/images/book1.png"; |
|
import analytics from "../../assets/icons/analytics.svg"; |
|
import danger from "../../assets/icons/danger.svg"; |
|
|
|
import "./index.scss"; |
|
|
|
const maxDesktopSize = 1250; |
|
|
|
const fontSize = { |
|
desktop: { |
|
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 45, |
|
h2: window.innerWidth > maxDesktopSize ? 21 : window.innerWidth / 65, |
|
p: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70, |
|
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75, |
|
form: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70, |
|
}, |
|
}; |
|
|
|
export default class Activation extends Component { |
|
state = { |
|
value: null, |
|
}; |
|
render() { |
|
const { data } = this.props; |
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
<> |
|
<div className="activation d-flex flex-column align-items-center"> |
|
<Navbar /> |
|
<header className="activation__header d-flex flex-column align-items-center"> |
|
<img src={analytics} alt="فعال سازی کتاب" /> |
|
<h1 style={{fontSize: fontSize.desktop.h1 }}>فعال سازی کتاب الکترونیک</h1> |
|
</header> |
|
<div className="activation__description d-flex"> |
|
<span>.</span> |
|
<p style={{ fontSize: fontSize.desktop.p }}> |
|
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد |
|
وارد تا کتاب الکترونیک آن فعالسازی شود |
|
</p> |
|
</div> |
|
<form |
|
className="activation__form d-flex" |
|
onSubmit={() => console.log()} |
|
> |
|
<input |
|
id="code" |
|
type="text" |
|
maxLength={9} |
|
autoComplete="off" |
|
onChange={(e) => this.setState({ code: e.target.value })} |
|
style={{fontSize: fontSize.desktop.form }} |
|
/> |
|
<button style={{fontSize: fontSize.desktop.form }} type="submit">ثبت کد فعال سازی</button> |
|
</form> |
|
<div className="activation__support d-flex align-center"> |
|
<span> |
|
<img src={danger} /> |
|
</span> |
|
<p style={{ fontSize: fontSize.desktop.p }}> |
|
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد |
|
وارد تا کتاب الکترونیک آن فعالسازی شود |
|
</p> |
|
</div> |
|
<div className="activation__history d-flex flex-column"> |
|
<h2 style={{fontSize: fontSize.desktop.h2 }}>آخرین مشاهدات</h2> |
|
{data.map((item, i) => ( |
|
<History data={item} key={i} /> |
|
))} |
|
</div> |
|
</div> |
|
<Footer /> |
|
</> |
|
) : null} |
|
{window.innerWidth < 1000 ? ( |
|
<div className="mobile-activation d-flex flex-column align-items-center"> |
|
<Navbar /> |
|
<div className="mobile-activation__back d-flex"> |
|
<Link to="/">بازگشت</Link> |
|
</div> |
|
<header className="mobile-activation__header d-flex flex-column align-items-center"> |
|
<img src={analytics} alt="فعال سازی کتاب" /> |
|
<h1>فعال سازی کتاب الکترونیک</h1> |
|
</header> |
|
<div className="mobile-activation__description d-flex"> |
|
<span>.</span> |
|
<p> |
|
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد |
|
وارد تا کتاب الکترونیک آن فعالسازی شود |
|
</p> |
|
</div> |
|
<form |
|
className="mobile-activation__form d-flex flex-column" |
|
onSubmit={() => console.log()} |
|
> |
|
<input |
|
id="code" |
|
type="text" |
|
maxLength={9} |
|
autoComplete="off" |
|
onChange={(e) => this.setState({ code: e.target.value })} |
|
/> |
|
<button type="submit">ثبت کد فعال سازی</button> |
|
</form> |
|
<div className="mobile-activation__support d-flex align-center"> |
|
<span> |
|
<img src={danger} /> |
|
</span> |
|
<p> |
|
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد |
|
وارد تا کتاب الکترونیک آن فعالسازی شود |
|
</p> |
|
</div> |
|
<div className="mobile-activation__history d-flex flex-column"> |
|
<h2>آخرین مشاهدات</h2> |
|
{data.map((item, i) => ( |
|
<History data={item} key={i} /> |
|
))} |
|
</div> |
|
</div> |
|
) : null} |
|
</> |
|
); |
|
} |
|
} |
|
|
|
Activation.defaultProps = { |
|
data: [ |
|
{ |
|
title: "ریاضیات گسسته خیلی پیشرفته", |
|
subTitle: "پایه هفتم ابتدایی", |
|
status: "انجام شد", |
|
image: book1, |
|
}, |
|
], |
|
};
|
|
|