From 221e5e7f2efe5708a010e33d7e123229831733de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?=
 =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?=
 <erik@darapsa.co.id>
Date: Tue, 20 Dec 2022 14:32:24 +0800
Subject: Personal details fields

---
 CheckoutFlickable.ui.qml | 124 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 108 insertions(+), 16 deletions(-)

diff --git a/CheckoutFlickable.ui.qml b/CheckoutFlickable.ui.qml
index 64a644f..c871462 100644
--- a/CheckoutFlickable.ui.qml
+++ b/CheckoutFlickable.ui.qml
@@ -5,7 +5,7 @@ import QtQuick.Layouts 1.15
 Flickable {
 	contentHeight: personal.height
 
-	Rectangle {
+	Item {
 		id: personal
 		anchors {
 			top: parent.top
@@ -13,25 +13,117 @@ Flickable {
 			right: parent.right
 		}
 
-		ColumnLayout {
-			Label {
-				text: qsTr("Your name *")
+		GridLayout {
+			ColumnLayout {
+				Label {
+					text: qsTr("Your name *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("Name")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
 			}
-			TextField {
-				placeholderText: qsTr("Name")
-				Layout.fillWidth: true
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Email address *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("Email")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
 			}
 
-			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
+			ColumnLayout {
+				Label {
+					text: qsTr("Mobile number *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("Mobile number")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
 			}
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Select country *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("Select country")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Select state *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("Select state")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Postal code *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("PIN code")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Address *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("Address")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
+
+			width: parent.width
+			columns: width < 786 ? 1 : 2
+			rows: width < 786 ? 4 : 7
+			columnSpacing: 0
+			rowSpacing: 0
 		}
 	}
 }
-- 
cgit v1.2.3