import React, { Component } from "react"; import Navbar from "../Home/Navbar/index"; import Footer from "../Home/Footer/index"; import VoiceBox from "./VoiceBox/index.js"; import VideoBox from "./VideoBox/index"; import PDF from "./PDF/index"; import PowerPoint from "./PowerPoint/index"; import Links from "./Links/index"; import SubjectsDropdown from "./SubjectsDropdown/index"; import BookContent from "./BookContent/index"; import NightsStayOutlinedIcon from "@material-ui/icons/NightsStayOutlined"; import { connect } from "react-redux"; import { qr } from "~/Redux/actions"; import exit from "../../assets/icons/exit.svg"; import sciense_7 from "../../assets/images/sciense-7.png"; import "./index.scss"; const maxDesktopSize = 1250; class QR extends Component { state = { theme: true, zoom: [10, 10], }; handleZoom = (type) => { if (type === "increase") { this.setState((prevState) => ({ zoom: prevState.zoom[0] === 18 ? prevState.zoom : [prevState.zoom[0] + 2, prevState.zoom[1] - 2], })); } else { this.setState((prevState) => ({ zoom: prevState.zoom[0] === 6 ? prevState.zoom : [prevState.zoom[0] - 2, prevState.zoom[1] + 2], })); } }; render() { const { QR, qrList } = this.props; const fontSize = { desktop: { sidebar: { h1: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95, h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120, div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120, }, content: { h1: window.innerWidth > maxDesktopSize ? this.state.zoom[0] * 2 : window.innerWidth / (this.state.zoom[1] * 7), p: window.innerWidth > maxDesktopSize ? this.state.zoom[0] * 1.4 : window.innerWidth / (this.state.zoom[1] * 12), h2: window.innerWidth > maxDesktopSize ? this.state.zoom[0] * 1.2 : (window.innerWidth / this.state.zoom[1]) * 12, }, }, }; return ( <> {window.innerWidth > 1000 ? ( <>
1250 ? props.fontSize.desktop.content.p : "", }} > {props.data.text}
) : null} {props.data.type === "h1" ? (