Separate counter delegate to its own file

2 files changed, 75 insertions, 67 deletions

diff --git a/CounterItem.ui.qml b/CounterItem.ui.qml
new file mode 100644
index 0000000..cc979d2
--- /dev/null
+++ b/CounterItem.ui.qml
@@ -0,0 +1,74 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+Item {
+	property alias area: area
+
+	Rectangle {
+		color: bgColor
+		radius: 8
+		anchors {
+			top: parent.top
+			topMargin: 25.6
+			left: parent.left
+			leftMargin: 12.8
+			right: parent.right
+			rightMargin: 12.8
+			bottom: parent.bottom
+		}
+
+		RowLayout {
+			anchors {
+				top: parent.top
+				topMargin: 25.6
+				left: parent.left
+				leftMargin: 25.6
+				right: parent.right
+				rightMargin: 25.6
+				bottom: parent.bottom
+				bottomMargin: 25.6
+			}
+
+			Image {
+				source: icon
+				sourceSize.height: parent.height
+			}
+
+			ColumnLayout {
+				FontLoader {
+					id: bold
+					name: "Heebo"
+					source: "Heebo/Heebo-Bold.ttf"
+				}
+
+				Label {
+					text: count
+					font {
+						family: bold.name
+						pixelSize: 21
+					}
+				}
+
+				FontLoader {
+					id: medium
+					name: "Heebo"
+					source: "Heebo/Heebo-Bold.ttf"
+				}
+
+				Label {
+					text: title
+					font {
+						family: medium.name
+						pixelSize: 15
+					}
+				}
+			}
+		}
+
+		MouseArea {
+			id: area
+			anchors.fill: parent
+		}
+	}
+}
diff --git a/DefaultHome.ui.qml b/DefaultHome.ui.qml
index 1ae4751..7ed3d4d 100644
--- a/DefaultHome.ui.qml
+++ b/DefaultHome.ui.qml
@@ -1,8 +1,8 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
 
 Flickable {
+	property alias counter: counter
 	property alias popularCourseTabsContent: popularCourseTabsContent
 	contentHeight: counter.height + popularCourseTabsContent.height
 
@@ -37,72 +37,6 @@ Flickable {
 			}
 		}
 
-		delegate: Item {
-			implicitWidth: counter.cellWidth
-			implicitHeight: counter.cellHeight
-			Rectangle {
-				color: bgColor
-				radius: 8
-				anchors {
-					top: parent.top
-					topMargin: 25.6
-					left: parent.left
-					leftMargin: 12.8
-					right: parent.right
-					rightMargin: 12.8
-					bottom: parent.bottom
-				}
-
-				RowLayout {
-					anchors {
-						top: parent.top
-						topMargin: 25.6
-						left: parent.left
-						leftMargin: 25.6
-						right: parent.right
-						rightMargin: 25.6
-						bottom: parent.bottom
-						bottomMargin: 25.6
-					}
-
-					Image {
-						source: icon
-						sourceSize.height: parent.height
-					}
-
-					ColumnLayout {
-						FontLoader {
-							id: bold
-							name: "Heebo"
-							source: "Heebo/Heebo-Bold.ttf"
-						}
-
-						Label {
-							text: count
-							font {
-								family: bold.name
-								pixelSize: 21
-							}
-						}
-
-						FontLoader {
-							id: medium
-							name: "Heebo"
-							source: "Heebo/Heebo-Bold.ttf"
-						}
-
-						Label {
-							text: title
-							font {
-								family: medium.name
-								pixelSize: 15
-							}
-						}
-					}
-				}
-			}
-		}
-
 		cellWidth: width < 576 ? width : width < 768 ? width / 2
 		: width < 992 ? width / 3 : width / 4
 		cellHeight: 125.6