From 5f29d8875c7bc26dc2f605b6387a79b7ddfdc680 Mon Sep 17 00:00:00 2001
From: Giulio De Pasquale <giulio@depasquale.eu>
Date: Wed, 16 Dec 2020 18:56:23 +0000
Subject: [PATCH] add currency component (forgot to add earlier...) and render
 other pairs if available

---
 websrc/components/Currency.tsx | 45 ++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 websrc/components/Currency.tsx

diff --git a/websrc/components/Currency.tsx b/websrc/components/Currency.tsx
new file mode 100644
index 0000000..f2068a6
--- /dev/null
+++ b/websrc/components/Currency.tsx
@@ -0,0 +1,45 @@
+import {Button, ButtonGroup, Dropdown} from "react-bootstrap";
+import React, {Component} from "react";
+import DropdownItem from "react-bootstrap/DropdownItem";
+import {CurrencyPair} from "../types";
+
+
+export type CurrencyPairProps = {
+    active_pair: CurrencyPair,
+    pairs: Array<CurrencyPair>
+}
+
+export class CurrencyDropdown extends Component<CurrencyPairProps> {
+    constructor(props) {
+        super(props);
+    }
+
+    dropdownItems() {
+        return this.props.pairs.map((pair) => {
+            return (
+                <DropdownItem key={String(pair.base) + String(pair.quote)}> {pair.base} / {pair.quote} </DropdownItem>)
+        })
+    }
+
+    render() {
+        return (
+            <Dropdown as={ButtonGroup} className={"mr-3"}>
+                <Button variant="outline-primary"><b>{this.props.active_pair.base} / {this.props.active_pair.quote}</b></Button>
+
+                {this.props.pairs.length > 0 &&
+
+                <>
+                    <Dropdown.Toggle split variant="primary" id="dropdown-split-basic"/>
+
+                    <Dropdown.Menu className={"mr-3"}>
+                        {this.dropdownItems()}
+                    </Dropdown.Menu>
+                </>
+                }
+
+            </Dropdown>
+        )
+    }
+
+}
+