qml: Add BlockCounter QML component prototype

Github-Pull: bitcoin-core#31
Rebased-From: 1441d5b

Author: hebasto

src/qml/BitcoinApp/CMakeLists.txt

@@ -16,9 +16,12 @@ qt6_add_qml_module(bitcoin_qml
     stub.qml
 )
 
+add_subdirectory(Components)
+
 target_link_libraries(bitcoin_qml
   INTERFACE
     bitcoin_qmlplugin
+    bitcoin_qml_componentsplugin
   PUBLIC
     Qt6::Widgets
     Qt6::Quick

src/qml/BitcoinApp/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
+import QtQuick.Controls
+
+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/BitcoinApp/Components/CMakeLists.txt

@@ -0,0 +1,12 @@
+# Copyright (c) 2025-present The Bitcoin Core developers
+# Distributed under the MIT software license, see the accompanying
+# file COPYING or https://opensource.org/license/mit/.
+
+qt6_add_qml_module(bitcoin_qml_components
+  URI BitcoinApp.Components
+  VERSION 1.0
+  STATIC
+  RESOURCE_PREFIX /qt/qml/
+  QML_FILES
+    BlockCounter.qml
+)

src/qml/BitcoinApp/stub.qml

@@ -2,8 +2,9 @@
 // Distributed under the MIT software license, see the accompanying
 // file COPYING or https://opensource.org/license/mit/.
 
-import QtQml
+import QtQuick
 import QtQuick.Controls
+import BitcoinApp.Components
 
 ApplicationWindow {
     id: appWindow
@@ -13,4 +14,11 @@ ApplicationWindow {
     visible: true
 
     Component.onCompleted: nodeModel.startNodeInitializionThread();
+
+    BlockCounter {
+        id: blockCounter
+        anchors.centerIn: parent
+        height: parent.height / 3
+        blockHeight: nodeModel.blockTipHeight
+    }
 }