mock up a list view for the OTPs

OwnTP/MainScreen.swift

@@ -8,18 +8,17 @@
 
 import SwiftUI
 
-struct ContentView: View {
+struct MainScreen: View {
+  let otps = [
+    OTP(label: "howdy", code: 123456),
+    OTP(label: "y'all", code: 7890)
+  ]
+
   var body: some View {
-    VStack {
+    OTPListView(otpList: otps)
-      Image(systemName: "clock")
-        .imageScale(.large)
-        .foregroundStyle(.tint)
-      Text("OwnTP")
-    }
-    .padding()
   }
 }
 
-#Preview {
+#Preview("App Main Screen") {
-  ContentView()
+  MainScreen()
 }

OwnTP/Models/OTP.swift

@@ -0,0 +1,18 @@
+//
+// This Source Code Form is subject to the terms of the Mozilla Public License,
+// v. 2.0. If a copy of the MPL was not distributed with this file, You can
+// obtain one at https://mozilla.org/MPL/2.0/.
+//
+// Copyright 2025 Nicola Clark
+//
+
+import Foundation
+
+struct OTP: Identifiable {
+  let id = UUID()
+
+  /// A human-readable label to identify the OTP
+  let label: String
+  /// The value of the OTP
+  let code: Int
+}

OwnTP/OwnTPApp.swift

@@ -12,7 +12,7 @@ import SwiftUI
 struct OwnTPApp: App {
   var body: some Scene {
     WindowGroup {
-      ContentView()
+      MainScreen()
     }
   }
 }

OwnTP/Views/OTPListView.swift

@@ -0,0 +1,32 @@
+//
+// This Source Code Form is subject to the terms of the Mozilla Public License,
+// v. 2.0. If a copy of the MPL was not distributed with this file, You can
+// obtain one at https://mozilla.org/MPL/2.0/.
+//
+// Copyright 2025 Nicola Clark
+//
+
+import SwiftUI
+
+struct OTPListView: View {
+  let otpList: [OTP]
+
+  var body: some View {
+    List {
+      ForEach(otpList) { otp in
+        HStack {
+          Text(otp.label)
+            .bold()
+          Spacer()
+          Text(String(format: "%06i", otp.code))
+        }
+      }
+    }
+  }
+}
+
+@available(iOS 17.0, *)
+#Preview("OTP List", traits: .sizeThatFitsLayout) {
+  OTPListView(otpList: [OTP(label: "howdy", code: 123456), OTP(label: "y'all", code: 7890)])
+    .frame(width: 300, height: 150)
+}