[iOS] Implement About page essential UI

app-ios/Modules/Package.swift

@@ -9,6 +9,7 @@ var package = Package(
         .iOS(.v16),
     ],
     products: [
+        .library(name: "Component", targets: ["Component"]),
         .library(name: "FloorMap", targets: ["FloorMap"]),
         .library(name: "Session", targets: ["Session"]),
         .library(name: "Timetable", targets: ["Timetable"]),
@@ -25,7 +26,11 @@ var package = Package(
         .target(
             name: "About",
             dependencies: [
+                "Assets",
+                "Component",
                 "shared",
+                "Model",
+                "Theme",
             ]
         ),
         .testTarget(
@@ -46,6 +51,13 @@ var package = Package(
             ]
         ),
 
+        .target(
+            name: "Component",
+            dependencies: [
+                "Theme",
+            ]
+        ),
+
         .target(
             name: "FloorMap",
             dependencies: [
@@ -65,6 +77,7 @@ var package = Package(
             name: "Session",
             dependencies: [
                 "Assets",
+                "Component",
                 "Model",
                 "shared",
                 "Theme",
@@ -77,6 +90,17 @@ var package = Package(
             ]
         ),
 
+        .target(
+            name: "Contributor",
+            dependencies: [
+                "Assets",
+                "Component",
+                "Model",
+                "shared",
+                "Theme",
+            ]
+        ),
+
         .target(
             name: "Stamps",
             dependencies: [
@@ -114,6 +138,7 @@ var package = Package(
                 "FloorMap",
                 "Session",
                 "Stamps",
+                "Contributor",
                 "Theme",
                 "Timetable",
             ]

app-ios/Modules/Sources/About/AboutView.swift

@@ -1,12 +1,126 @@
+import Assets
+import Component
+import Model
 import SwiftUI
+import Theme
+
+enum AboutRouting: Hashable {
+    case contributors
+}
+
+public struct AboutView<ContributorView: View>: View {
+    private let contributorViewProvider: ViewProvider<Void, ContributorView>
+
+    public init(contributorViewProvider: @escaping ViewProvider<Void, ContributorView>) {
+        self.contributorViewProvider = contributorViewProvider
+    }
 
-public struct AboutView: View {
-    public init() {}
     public var body: some View {
-        Text("About View")
+        NavigationStack {
+            ScrollView {
+                VStack(spacing: 0) {
+                    Assets.Images.aboutKeyVisual.swiftUIImage
+                    Spacer().frame(height: 16)
+                    Text("DroidKaigiはAndroid技術情報の共有とコミュニケーションを目的に開催されるエンジニアが主役のAndroidカンファレンスです。")
+                        .font(Font.system(size: 16))
+                    Spacer().frame(height: 12)
+                    VStack(alignment: .leading, spacing: 12) {
+                        InformationRow(
+                            icon: Assets.Icons.info.swiftUIImage,
+                            title: "日時",
+                            content: "2023.09.14(木) 〜 16(土) 3日間"
+                        )
+                        InformationRow(
+                            icon: Assets.Icons.info.swiftUIImage,
+                            title: "場所",
+                            content: "ベルサール渋谷ガーデン",
+                            action: .init(
+                                label: "地図を見る",
+                                action: {
+                                    // TODO: Open map
+                                }
+                            )
+                        )
+                    }
+                    .padding(.vertical, 20)
+                    .padding(.horizontal, 16)
+                    .background(AssetColors.Surface.surfaceContainerLow.swiftUIColor)
+                    .clipShape(RoundedRectangle(cornerRadius: 12))
+                    Spacer().frame(height: 32)
+                    SectionTitle(title: "Credits")
+                    ListTile(
+                        icon: Assets.Icons.sentimentVerySatisfied.swiftUIImage,
+                        title: "スタッフ"
+                    )
+                    Divider()
+                    NavigationLink(value: AboutRouting.contributors) {
+                        ListTile(
+                            icon: Assets.Icons.diversity.swiftUIImage,
+                            title: "コントリビューター"
+                        )
+                    }
+                    Divider()
+                    ListTile(
+                        icon: Assets.Icons.apartment.swiftUIImage,
+                        title: "スポンサー"
+                    )
+                    Divider()
+                    SectionTitle(title: "Others")
+                    ListTile(
+                        icon: Assets.Icons.gavel.swiftUIImage,
+                        title: "行動規範"
+                    )
+                    Divider()
+                    ListTile(
+                        icon: Assets.Icons.fileCopy.swiftUIImage,
+                        title: "ライセンス"
+                    )
+                    Divider()
+                    ListTile(
+                        icon: Assets.Icons.privacyTip.swiftUIImage,
+                        title: "プライバシーポリシー"
+                    )
+                    Divider()
+                    HStack(spacing: 12) {
+                        Button {
+                            // TODO: open youtube
+                        } label: {
+                            Assets.Icons.youtube.swiftUIImage
+                        }
+                        Button {
+                            // TODO: open Twitter
+                        } label: {
+                            Assets.Icons.twitter.swiftUIImage
+                        }
+                        Button {
+                            // TODO: open medium
+                        } label: {
+                            Assets.Icons.medium.swiftUIImage
+                        }
+                    }
+                    .padding(.vertical, 24)
+
+                    Text("アプリバージョン")
+                        .font(Font.system(size: 14, weight: .medium))
+                    Spacer().frame(height: 8)
+                    Text("1.2")
+                        .font(Font.system(size: 14, weight: .medium))
+                }
+                .padding(.horizontal, 16)
+            }
+            .navigationTitle("About")
+            .navigationDestination(for: AboutRouting.self) { routing in
+                switch routing {
+                case .contributors:
+                    contributorViewProvider(())
+                }
+            }
+        }
     }
 }
 
-// #Preview {
-//     AboutView()
-// }
+ #Preview {
+     AboutView(
+        contributorViewProvider: {_ in EmptyView()}
+     )
+ }

app-ios/Modules/Sources/About/ListTile.swift

@@ -0,0 +1,28 @@
+import SwiftUI
+import Theme
+
+struct ListTile: View {
+    let icon: Image
+    let title: String
+
+    var body: some View {
+        HStack(spacing: 12) {
+            icon
+                .renderingMode(.template)
+                .foregroundStyle(AssetColors.Surface.onSurfaceVariant.swiftUIColor)
+            Text(title)
+                .font(Font.system(size: 14, weight: .medium))
+                .foregroundStyle(AssetColors.Surface.onSurface.swiftUIColor)
+        }
+        .padding(.horizontal, 12)
+        .padding(.vertical, 24)
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+}
+
+#Preview {
+    ListTile(
+        icon: Image(systemName: "calendar"),
+        title: "カレンダー"
+    )
+}

app-ios/Modules/Sources/About/SectionTitle.swift

@@ -0,0 +1,16 @@
+import SwiftUI
+
+struct SectionTitle: View {
+    let title: String
+
+    var body: some View {
+        Text(title)
+            .font(Font.system(size: 16, weight: .medium))
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .padding(.top, 16)
+    }
+}
+
+#Preview {
+    SectionTitle(title: "SectionTitle")
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/apartment.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_apartment.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/diversity.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_diversity_1.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/file_copy.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_file_copy.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/gavel.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_gavel.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/medium.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "medium.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/privacy_tip.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_privacy_tip.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/sentiment_very_satisfied.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_sentiment_very_satisfied.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/twitter.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "twitter.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/youtube.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "youtube.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Images.xcassets/AboutKeyVisual.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "img_AboutKeyVisual.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}