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, }, ], };