From 09339b48564537a56033c31fdb3f8906231fa22b Mon Sep 17 00:00:00 2001
From: Go Takagi <15936908+shimastripe@users.noreply.github.com>
Date: Fri, 16 Aug 2024 23:39:50 +0900
Subject: [PATCH] Refine sponsor grid view

---
 .../Sources/SponsorFeature/SponsorView.swift  | 70 ++++++++-----------
 1 file changed, 30 insertions(+), 40 deletions(-)

diff --git a/app-ios/Sources/SponsorFeature/SponsorView.swift b/app-ios/Sources/SponsorFeature/SponsorView.swift
index d84b71a34..7fb23647d 100644
--- a/app-ios/Sources/SponsorFeature/SponsorView.swift
+++ b/app-ios/Sources/SponsorFeature/SponsorView.swift
@@ -18,58 +18,21 @@ public struct SponsorView: View {
                     .foregroundStyle(AssetColors.Primary.primaryFixed.swiftUIColor)
                     .frame(maxWidth: .infinity, alignment: .leading)
                 
-                ForEach(store.platinums, id: \.id) { platinum in
-                    Button {
-                        selectedSponsorData = platinum
-                    } label: {
-                        AsyncImage(url: platinum.logo) {
-                            $0.image?
-                                .resizable()
-                                .scaledToFit()
-                        }
-                        .frame(height: 110)
-                    }
-                }
+                makeSponsorGrid(columnCount: 1, items: store.platinums, imageHeight: 110)
                 
                 Text("GOLD SPONSORS")
                     .textStyle(.headlineSmall)
                     .foregroundStyle(AssetColors.Primary.primaryFixed.swiftUIColor)
                     .frame(maxWidth: .infinity, alignment: .leading)
                 
-                LazyVGrid(columns: Array(repeating: .init(.fixed(184)), count: 2)) {
-                    ForEach(store.golds, id: \.id) { gold in
-                        Button {
-                            selectedSponsorData = gold
-                        } label: {
-                            AsyncImage(url: gold.logo) {
-                                $0.image?
-                                    .resizable()
-                                    .scaledToFit()
-                            }
-                            .frame(height: 80)
-                        }
-                    }
-                }
+                makeSponsorGrid(columnCount: 2, items: store.golds, imageHeight: 77)
                 
                 Text("SUPPORTERS")
                     .textStyle(.headlineSmall)
                     .foregroundStyle(AssetColors.Primary.primaryFixed.swiftUIColor)
                     .frame(maxWidth: .infinity, alignment: .leading)
                 
-                LazyVGrid(columns: Array(repeating: .init(.fixed(118)), count: 3)) {
-                    ForEach(store.supporters, id: \.id) { supporter in
-                        Button {
-                            selectedSponsorData = supporter
-                        } label: {
-                            AsyncImage(url: supporter.logo) {
-                                $0.image?
-                                    .resizable()
-                                    .scaledToFit()
-                            }
-                            .frame(height: 80)
-                        }
-                    }
-                }
+                makeSponsorGrid(columnCount: 3, items: store.supporters, imageHeight: 77)
             }
             .padding(16)
         }
@@ -80,6 +43,33 @@ public struct SponsorView: View {
         .navigationBarTitleDisplayMode(.large)
         .navigationTitle(String(localized: "Sponsor", bundle: .module))
     }
+
+    @ViewBuilder
+    func makeSponsorGrid(columnCount: Int, items: [SponsorData], imageHeight: Double) -> some View {
+        let gridItems = (1...columnCount)
+            .map { _ in
+                GridItem(.flexible(), spacing: 12, alignment: .center)
+            }
+        LazyVGrid(columns: gridItems, spacing: 12) {
+            ForEach(items, id: \.id) { item in
+                Button {
+                    selectedSponsorData = item
+                } label: {
+                    ZStack {
+                        AssetColors.Inverse.inverseSurface.swiftUIColor
+                            .clipShape(RoundedRectangle(cornerRadius: 12))
+                        AsyncImage(url: item.logo) {
+                            $0.image?
+                                .resizable()
+                                .scaledToFit()
+                        }
+                        .frame(height: imageHeight)
+                        .padding(.vertical, 6)
+                    }
+                }
+            }
+        }
+    }
 }
 
 #Preview {