qml: Add BlockCounter QML component prototype

Author: hebasto

src/qml/bitcoin_qml.qrc

@@ -1,5 +1,6 @@
 <!DOCTYPE RCC><RCC version="1.0">
     <qresource prefix="/qml">
+        <file>components/BlockCounter.qml</file>
         <file>pages/initerrormessage.qml</file>
         <file>pages/stub.qml</file>
     </qresource>

src/qml/components/BlockCounter.qml

@@ -0,0 +1,21 @@
+// Copyright (c) 2021 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+// The BlockCounter component.
+
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+Label {
+    property int blockHeight: 0
+    background: Rectangle {
+        color: "black"
+    }
+    color: "orange"
+    padding: 16
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+    font.pixelSize: height / 3
+    text: blockHeight
+}

src/qml/pages/stub.qml

@@ -2,8 +2,10 @@
 // Distributed under the MIT software license, see the accompanying
 // file COPYING or http://www.opensource.org/licenses/mit-license.php.
 
-import QtQml 2.12
+import QtQuick 2.12
 import QtQuick.Controls 2.12
+import "../components" as BitcoinCoreComponents
+
 
 ApplicationWindow {
     id: appWindow
@@ -13,4 +15,11 @@ ApplicationWindow {
     visible: true
 
     Component.onCompleted: nodeModel.startNodeInitializionThread();
+
+    BitcoinCoreComponents.BlockCounter {
+        id: blockCounter
+        anchors.centerIn: parent
+        height: parent.height / 3
+        blockHeight: nodeModel.blockTipHeight
+    }
 }