diff --git a/websrc/components/Statusbar.tsx b/websrc/components/Statusbar.tsx new file mode 100644 index 0000000..0fdccfa --- /dev/null +++ b/websrc/components/Statusbar.tsx @@ -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 { + 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 ( + {this.sign} + ) + } + return null + } + + symbolOrPercentageRender() { + if (this.props.percentage) { + return ( + <> + + {this.renderSign()} + {Math.abs(this.props.amount).toFixed(2)} + % + + ) + } else { + return ( + <> + {this.renderSign()}{this.props.quote_symbol} + {this.whole} + .{this.decimal} + + ) + } + } + + render() { + return ( + <> +
+ {this.symbolOrPercentageRender()} +
+
+ {this.props.subtitle} +
+ + ) + } +} + +type DateButtonProps = { + label: string +} + +type DateButtonState = { + selected: boolean +} + +class DateButton extends Component { + 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 ( + + ) + } +} + +export class Statusbar extends Component { + constructor(props) { + super(props); + } + + render() { + console.log("MAIN") + console.log(this.props.price) + return ( +
+
+
+
+ Price Charts +
+
+ + + +
+
+ + + + + + +
+
+
+
+
+
+ CA$ + 21,404 + .74 +
+
+ ↑ CA$12,955.35 (154.16%) +
+
+
+ +
+ + + +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ ) + } +} \ No newline at end of file