core/websrc/components/Cards.tsx

139 lines
4.8 KiB
TypeScript
Raw Normal View History

2020-12-14 18:52:43 +00:00
import React, {Component} from 'react';
import {Currency} from "../types";
2020-12-12 20:18:25 +00:00
type CardProps = {
title: string,
content: string,
2020-12-18 19:00:02 +00:00
logo?: JSX.Element,
2020-12-12 20:18:25 +00:00
}
2020-12-19 17:27:19 +00:00
export type CoinBalanceProps = {
name: string,
amount: number,
short: string,
percentage?: number,
quote_equivalent: number,
quote_symbol: string,
icon: JSX.Element,
}
class CoinBalance extends Component<CoinBalanceProps> {
constructor(props) {
super(props);
}
render() {
return (
<div className="flex-grow flex px-6 py-3 text-gray-800 items-center border-b -mx-4 align-middle">
<div className={"w-1/8"}>
{this.props.icon}
</div>
<div className="w-2/5 xl:w-1/4 px-4 flex items-center">
<span className="text-lg">{this.props.name}</span>
</div>
<div className="hidden md:flex lg:hidden xl:flex w-1/4 px-1 flex-col">
<div className={"italic w-full text-center"}>
{Math.trunc(this.props.percentage)}%
</div>
<div className="w-full bg-transparent mt-2">
<div className={"bg-blue-400 rounded-lg text-xs leading-none py-1 text-center text-white"}
style={{width: this.props.percentage.toString().concat("%")}}/>
</div>
</div>
<div className="flex w-3/5 md:w/12">
<div className="w-1/2 px-4">
<div className="text-right">
{this.props.amount.toFixed(5)} {this.props.short}
</div>
</div>
<div className="w-1/2 px-4 align-middle">
<div className="text-right text-gray-400">
{this.props.quote_symbol} {this.props.quote_equivalent}
</div>
</div>
</div>
</div>
)
}
}
2020-12-18 14:02:21 +00:00
export class SidebarCard extends Component<CardProps> {
constructor(props: CardProps) {
super(props)
}
render() {
return (
2020-12-18 19:00:02 +00:00
<div className="bg-gray-300 mt-2 mx-2 rounded p-2 flex flex-col items-center">
<div className="text-gray-600">{this.props.logo} {this.props.title}</div>
2020-12-18 14:02:21 +00:00
<div className="mt-1 mx-auto text-center text-3xl font-semibold">{this.props.content}</div>
</div>
)
}
2020-12-19 16:17:10 +00:00
}
export type WalletCardState = {
2020-12-19 17:27:19 +00:00
balances: Array<CoinBalanceProps>,
total_balance: number,
quote: Currency,
2020-12-19 17:27:19 +00:00
}
export class WalletCard extends Component<{}, WalletCardState> {
state = {
balances: [],
total_balance: 0,
quote: {name: "USD", short_name: "$"}
}
2020-12-19 16:17:10 +00:00
constructor(props) {
super(props);
}
2020-12-19 17:27:19 +00:00
2020-12-19 17:27:19 +00:00
renderCoinBalances() {
return (
this.state.balances.map((balance) => {
2020-12-19 17:27:19 +00:00
return (
<CoinBalance icon={balance.icon} name={balance.name} amount={balance.amount} short={balance.short}
quote_equivalent={balance.quote_equivalent} percentage={balance.percentage}
quote_symbol={balance.quote_symbol}/>
)
})
)
}
render() {
return (
2020-12-19 16:17:10 +00:00
<div className="w-full mb-6 lg:mb-0 px-4 flex flex-col">
<div
className="flex-grow flex flex-col bg-white border-t border-b sm:rounded sm:border shadow overflow-hidden">
<div className="border-b">
<div className="flex justify-between px-6 -mb-px">
<h3 className="text-blue-700 py-4 font-normal text-lg">Your Wallets</h3>
<div className="flex">
<button type="button"
className="appearance-none py-4 text-blue-700 border-b border-blue-dark mr-3">
List
</button>
<button type="button"
className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark">
Chart
</button>
</div>
</div>
</div>
2020-12-19 17:27:19 +00:00
{this.renderCoinBalances()}
2020-12-19 16:17:10 +00:00
<div className="px-6 py-4">
<div className="text-center text-gray-400">
Total Balance &asymp; {this.state.quote_symbol}{this.props.total_balance.toFixed(2)}
2020-12-19 16:17:10 +00:00
</div>
</div>
</div>
</div>
)
}
2020-12-18 14:02:21 +00:00
}