rustico/core
2
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

added statusbar class file

Browse Source
This commit is contained in:
Giulio De Pasquale 2020-12-19 16:16:57 +00:00
parent e3eb10de57
commit 2beb960aa7
1 changed files with 207 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
websrc/components/Statusbar.tsx Normal file
View 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 &middot; 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 &middot; CA$884.80
</button>
<button type="button"
className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark">
Litecoin &middot; 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">
&uarr; 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>
)
}
}