added statusbar class file
This commit is contained in:
Giulio De Pasquale
parent
e3eb10de57
commit
2beb960aa7
207
websrc/components/Statusbar.tsx
Normal file
207
websrc/components/Statusbar.tsx
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
import React, {Component} from "react";
|
||||||
|
import {NewTickMessage} from "../types";
|
||||||
|
|
||||||
|
type QuoteStatusProps = {
|
||||||
|
percentage?: boolean,
|
||||||
|
quote_symbol?: string,
|
||||||
|
amount: number,
|
||||||
|
subtitle: string,
|
||||||
|
sign?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export class QuoteStatus extends Component<QuoteStatusProps> {
|
||||||
|
private whole: number;
|
||||||
|
private decimal: number;
|
||||||
|
private sign: string;
|
||||||
|
private signClass: string;
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
console.log("SUB")
|
||||||
|
console.log(this.props.amount)
|
||||||
|
this.deriveProps()
|
||||||
|
}
|
||||||
|
|
||||||
|
deriveProps() {
|
||||||
|
this.whole = Math.abs(Math.trunc(this.props.amount))
|
||||||
|
this.decimal = Math.trunc(this.props.amount % 1 * 100)
|
||||||
|
this.sign = this.props.amount > 0 ? "+" : "-"
|
||||||
|
|
||||||
|
this.signClass = this.props.amount > 0 ? "text-green-500" : "text-red-500"
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSign() {
|
||||||
|
if (this.props.sign) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={this.signClass}>{this.sign}</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
symbolOrPercentageRender() {
|
||||||
|
if (this.props.percentage) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<span className="text-4xl text-bold align-top">
|
||||||
|
{this.renderSign()}</span>
|
||||||
|
<span className="text-5xl">{Math.abs(this.props.amount).toFixed(2)}</span>
|
||||||
|
<span className="text-3xl align-top">%</span>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<span className="text-4xl text-bold align-top">{this.renderSign()}{this.props.quote_symbol}</span>
|
||||||
|
<span className="text-5xl">{this.whole}</span>
|
||||||
|
<span className="text-3xl align-top">.{this.decimal}</span>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="text-gray-700 mb-2">
|
||||||
|
{this.symbolOrPercentageRender()}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm uppercase text-gray-300 tracking-wide">
|
||||||
|
{this.props.subtitle}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type DateButtonProps = {
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type DateButtonState = {
|
||||||
|
selected: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
class DateButton extends Component<DateButtonProps, DateButtonState> {
|
||||||
|
private classSelected: string = "appearance-none py-4 text-blue-600 border-b border-blue-600 mr-3";
|
||||||
|
private classNotSelected: string = "appearance-none py-4 text-gray-600 border-b border-transparent hover:border-gray-800 mr-3";
|
||||||
|
private currentClass: string;
|
||||||
|
|
||||||
|
state = {
|
||||||
|
selected: false
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.updateClass()
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleState() {
|
||||||
|
this.setState({selected: !this.state.selected})
|
||||||
|
this.updateClass()
|
||||||
|
}
|
||||||
|
|
||||||
|
updateClass() {
|
||||||
|
this.currentClass = this.state.selected ? this.classSelected : this.classNotSelected;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<button type="button"
|
||||||
|
className={this.currentClass} onClick={() => this.toggleState()}>
|
||||||
|
{this.props.label}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class Statusbar extends Component<NewTickMessage> {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
console.log("MAIN")
|
||||||
|
console.log(this.props.price)
|
||||||
|
return (
|
||||||
|
<div className="bg-white border-t border-b sm:border-l sm:border-r sm:rounded shadow flex-grow mb-6">
|
||||||
|
<div className="border-b px-6">
|
||||||
|
<div className="flex justify-between -mb-px">
|
||||||
|
<div className="lg:hidden text-blue-600 py-4 text-lg">
|
||||||
|
Price Charts
|
||||||
|
</div>
|
||||||
|
<div className="hidden lg:flex">
|
||||||
|
<button type="button"
|
||||||
|
className="appearance-none py-4 text-blue-600 border-b border-blue-dark mr-6">
|
||||||
|
Bitcoin · CA$21,404.74
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark mr-6">
|
||||||
|
Ethereum · CA$884.80
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark">
|
||||||
|
Litecoin · CA$358.24
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex text-sm">
|
||||||
|
<DateButton label={"1m"}/>
|
||||||
|
<DateButton label={"1D"}/>
|
||||||
|
<DateButton label={"1W"}/>
|
||||||
|
<DateButton label={"1M"}/>
|
||||||
|
<DateButton label={"1Y"}/>
|
||||||
|
<DateButton label={"ALL"}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center px-6 lg:hidden">
|
||||||
|
<div className="flex-grow flex-no-shrink py-6">
|
||||||
|
<div className="text-gray-700 mb-2">
|
||||||
|
<span className="text-3xl align-top">CA$</span>
|
||||||
|
<span className="text-5xl">21,404</span>
|
||||||
|
<span className="text-3xl align-top">.74</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-green-300 text-sm">
|
||||||
|
↑ CA$12,955.35 (154.16%)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink w-32 inline-block relative">
|
||||||
|
<select
|
||||||
|
className="block appearance-none w-full bg-white border border-grey-light px-4 py-2 pr-8 rounded">
|
||||||
|
<option>BTC</option>
|
||||||
|
<option>ETH</option>
|
||||||
|
<option>LTC</option>
|
||||||
|
</select>
|
||||||
|
<div className="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-gray-300">
|
||||||
|
<svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20">
|
||||||
|
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="hidden lg:flex">
|
||||||
|
<div className="w-1/3 text-center py-8">
|
||||||
|
<div className="border-r">
|
||||||
|
<QuoteStatus key={this.props.price} quote_symbol={"USD"} amount={this.props.price}
|
||||||
|
subtitle={"Bitcoin price"}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-1/3 text-center py-8">
|
||||||
|
<div className="border-r">
|
||||||
|
<QuoteStatus quote_symbol={"GBP"} sign={true} amount={12134.20} subtitle={"since last month"}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-1/3 text-center py-8">
|
||||||
|
<div>
|
||||||
|
<QuoteStatus percentage={true} sign={true} amount={-100.45} subtitle={"since last month"}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user