priyatham
/
quadb-hodlinfo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dropdown state fix

This commit is contained in:
Priyatham Sai Chand 2021-04-21 01:50:56 +05:30
parent 7b244501dd
commit 54cd97df5a
5 changed files with 51 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.js
View File

@ -9,7 +9,6 @@ function App() {
return (
<div className="App">
<MainPage />
<Footer />
</div>
);
}

2
src/components/Footer.js
View File

@ -9,7 +9,7 @@ export class Footer extends Component {
render() {
return(
<div className=" theme-light d-flex align-items-center text-center">
<div className="d-flex align-items-center text-center">
<div className="footer-text">Copyright © 2019</div>
<div className="footer-text">HodlInfo.com</div>
<div className="footer-text">Developed By <a rel="nofollow" href="https://www.quadbtech.com" target="_blank" style={{color:"#3dc6c1"}}> QuadBTech</a></div>

65
src/components/Header.js
View File

@ -1,12 +1,15 @@
import React, { useState,Component } from 'react';
import React, { useState,Component, useEffect } from 'react';
import './styles.css';
import {CircularProgressbar} from 'react-circular-progressbar';
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
export const Header = (props) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
const [dropdownOpenCurrency, setDropdownOpenCurrency] = useState(false);
const [dropdownOpenAsset, setDropdownOpenAsset] = useState(false);
const [currency, setCurrency] = useState("INR");
const [asset, setAsset] = useState("BTC");
const toggleCurrency = () => setDropdownOpenCurrency(prevState => !prevState);
const toggleAsset = () => setDropdownOpenAsset(prevState => !prevState);
return (
<div style={{padding: "20px 30px 0px"}}>
<div class=" align-items-center justify-content-sm-center row">
@ -24,42 +27,36 @@ export const Header = (props) => {
</p>
</div>
<div class="text-center padding-none col-12 col-sm-12 col-md-2 col-lg-4">
<div class="btn-group">
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<ButtonDropdown isOpen={dropdownOpenCurrency} toggle={toggleCurrency} >
<DropdownToggle caret className={"header-button"}>
INR
{currency}
</DropdownToggle>
<DropdownMenu>
<DropdownItem>INR</DropdownItem>
<DropdownMenu >
<DropdownItem value="INR" onClick={(e) => setCurrency(e.target.value)}>INR</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
&nbsp;
&nbsp;
<div class="btn-group">
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle} className={""}>
<DropdownToggle caret className={"header-button"}>
ETH
</DropdownToggle>
<DropdownMenu>
<DropdownItem>BTC</DropdownItem>
<DropdownItem>ETH</DropdownItem>
<DropdownItem>USDT</DropdownItem>
<DropdownItem>XRP</DropdownItem>
<DropdownItem>TRX</DropdownItem>
<DropdownItem>DASH</DropdownItem>
<DropdownItem>ZEC</DropdownItem>
<DropdownItem>XEM</DropdownItem>
<DropdownItem>IOST</DropdownItem>
<DropdownItem>WIN</DropdownItem>
<DropdownItem>BTT</DropdownItem>
<DropdownItem>WRX</DropdownItem>
<ButtonDropdown isOpen={dropdownOpenAsset} toggle={toggleAsset} >
<DropdownToggle caret className={"header-button"}>
{asset}
</DropdownToggle>
<DropdownMenu>
<DropdownItem value="BTC" onClick={(e) => setAsset(e.target.value)}>BTC</DropdownItem>
<DropdownItem value="ETH" onClick={(e) => setAsset(e.target.value)}>ETH</DropdownItem>
<DropdownItem value="USDT" onClick={(e) => setAsset(e.target.value)}>USDT</DropdownItem>
<DropdownItem value="XRP" onClick={(e) => setAsset(e.target.value)}>XRP</DropdownItem>
<DropdownItem value="TRX" onClick={(e) => setAsset(e.target.value)}>TRX</DropdownItem>
<DropdownItem value="DASH" onClick={(e) => setAsset(e.target.value)}>DASH</DropdownItem>
<DropdownItem value="ZEC" onClick={(e) => setAsset(e.target.value)}>ZEC</DropdownItem>
<DropdownItem value="ZEC" onClick={(e) => setAsset(e.target.value)}>XEM</DropdownItem>
<DropdownItem value="IOST" onClick={(e) => setAsset(e.target.value)}>IOST</DropdownItem>
<DropdownItem value="WIN" onClick={(e) => setAsset(e.target.value)}>WIN</DropdownItem>
<DropdownItem value="BTT" onClick={(e) => setAsset(e.target.value)}>BTT</DropdownItem>
<DropdownItem value="WRX" onClick={(e) => setAsset(e.target.value)}>WRX</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
<div class="btn-group"><a target="_blank" href="https://wazirx.com/invite/sp7pvbt6?utm_source=finstreet&amp;utm_medium=affiliate&amp;utm_campaign=regnow-btn" type="button" aria-haspopup="true" aria-expanded="false" class="header-button btn btn-secondary">BUY ETH</a>
</div>
<a target="_blank" href="" type="button" aria-haspopup="true" aria-expanded="false" class="header-button btn btn-secondary">BUY {asset}</a>
</div>
<div class="right-header col-12 col-sm-12 col-md-5 col-lg-4">
<div class="d-inline-flex flex-wrap align-items-center justify-content-center">
@ -72,7 +69,7 @@ export const Header = (props) => {
</a>
<div className="d-inline-flex flex-wrap align-items-center justify-content-center">
<div className="progress-bar-wrapper">
<CircularProgressbar value={100} text={"4"} />
<CircularProgressbar value={parseFloat(props.countDownTimer * 100 / 60.0)} text={`${props.countDownTimer}`}/>
</div>
<div className="margin-10 d-inline-block">
<label className="switch">

11
src/components/MainPage.js
View File

@ -1,8 +1,14 @@
import React, { useState, Component } from 'react';
import React, { useState,useEffect, Component } from 'react';
import "./styles.css";
import {Header} from "./Header";
import {Footer} from "./Footer";
import 'react-circular-progressbar/dist/styles.css';
export const MainPage = () => {
const [isLightTheme, setIsLightTheme ] = useState(false);
const [countDownTimer, setCountDownTimer] = useState(60);
useEffect(() => {
countDownTimer > 0 && setTimeout(() => setCountDownTimer(countDownTimer - 1), 1000);
}, [countDownTimer])
const onThemeButtonClick = () => {
setIsLightTheme(!isLightTheme)
@ -10,7 +16,7 @@ const onThemeButtonClick = () => {
return (
<React.Fragment>
<div className={("theme-") + (isLightTheme ? "light" : "dark")+(" padding-bottom-50")}>
<Header isLightTheme={isLightTheme} onThemeButtonClick={onThemeButtonClick } />
<Header isLightTheme={isLightTheme} onThemeButtonClick={onThemeButtonClick } countDownTimer={countDownTimer}/>
<div class="Container-fluid " style={{ padding: "0px 30px" }}>
<div class="d-flex justify-content-around align-items-center average-header" style={{ padding: "10px 0px" }}>
<div class="text-center">
@ -126,6 +132,7 @@ const onThemeButtonClick = () => {
<a target="_blank" href="https://ftx.com/#a=finstreet">
<img src="BannerFTXNews.png" style={{ width: "100%" }} /></a>
</div>
<Footer />
</div>
</React.Fragment>

13
src/components/styles.css
View File

@ -224,8 +224,11 @@
.theme-light .header-button {
color: #0c0f48;
background-color: #f8f9fa;
border: 0px;
box-shadow: 0 0 2px #ddd;
border-radius: 10px;
margin: 10px;
padding: 6px 20px;
border-radius: 10px;
border: 0;
}
.theme-light .toggle-button-circle {
height: 20px;
@ -309,7 +312,11 @@
.theme-dark .header-button {
background-color: #2e3241;
color: white;
border: 0px;
border-radius: 10px;
margin: 10px;
padding: 6px 20px;
border-radius: 10px;
border: 0;
}
.theme-dark .toggle-button-circle {
height: 30px;