import React, {useEffect, useState} from 'react'; import styles from "./main.module.scss"; import {getCall} from "../../api/getCall"; const TOKEN = process.env.REACT_APP_TOKEN const Main = () => { const [quote, setQuote] = useState("Loading...") const [theme, setTheme] = useState(); useEffect(() => { getCall({path: "https://timezoneapi.io/api/ip/?token=" + TOKEN}).then((result) => { var s = new Date().toLocaleString(undefined, {timeZone: result.data.data.timezone.id}); const hours = s .split(", ")[1] .split(":")[0]; if(hours >= 20 && hours<=5 ){ setTheme(false) }else{ setTheme(true) } }).catch((error) => { console.log(error) }); getCall({path: "https://api.quotable.io/random"}).then((item) => setQuote(item.data.content)).catch((error) => { console.log(error) }) }, []) const handleClick = () => { setQuote("Loading...") getCall({path: "https://api.quotable.io/random"}).then((item) => setQuote(item.data.content)).catch((error) => { console.log(error) }) } if(!theme){ return(null) }else{ return ( <section className={[ styles.main, (theme ? styles.day_mode : styles.night_mode) ].join(' ')}> <div> <h1 className={[ styles.main_title, (theme ? styles.day_mode_title : styles.night_mode_title) ].join(" ")}>Quote Generator</h1> <span>Theme is decided as per the local time.<br/> Theme is {theme ? "day theme" : "night theme"} supports all country</span> </div> <div className={[ styles.quote_generator, (theme ? styles.night_mode : styles.day_mode) ].join(" ")}> {quote} </div> <button className={[ styles.button, (theme ? styles.night_mode : styles.day_mode) ].join(' ')} onClick={handleClick}>Generate Quote</button> </section> ) } } export default Main 

.main{ height: 100vh; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; &_title{ font-size: 2.5em; text-align: center; } .quote_generator{ min-height:300px; width: 70%; margin: 0 auto; border-radius: 16px; padding: 20px; font-size: 2em; text-align: center; display: flex; align-items: center; justify-content: center; @media screen and (max-width:768px){ width: 100%; padding: 20px; } @media screen and (max-width:556px){ padding: 10px; } } span{ color: red; font-style: italic; font-weight: 100; font-size: 0.8em; display: block; text-align: center; } .button{ height: 50px; border: none; padding: 10px; border-radius: 0.5em; font-size: 1em; cursor: pointer; } } .day_mode{ background-color: rgb(235, 235, 235); color: #173f5f; } .night_mode{ color: rgb(235, 235, 235); background-color: #173f5f; } .day_mode_title{ color: #173f5f; } .night_mode_title{ color: rgb(235, 235, 235); } 

import axios from "axios" export const getCall = async({path}) => { return axios .get(`${path}`) }