|
| 1 | +// |
| 2 | +// ContentView.swift |
| 3 | +// Example-CocoaPods |
| 4 | +// |
| 5 | +// Created by Takuma Jimbo on 2025/10/21. |
| 6 | +// |
| 7 | + |
| 8 | +import SwiftUI |
| 9 | +import Nubrick |
| 10 | + |
| 11 | +struct ItemBuyButton: View { |
| 12 | + let price: String |
| 13 | + let onAction: () -> () |
| 14 | + var body: some View { |
| 15 | + VStack { |
| 16 | + Divider() |
| 17 | + HStack { |
| 18 | + Text(self.price).fontWeight(.medium) |
| 19 | + Spacer() |
| 20 | + Button(action: { |
| 21 | + self.onAction() |
| 22 | + }) { |
| 23 | + Text("Book").foregroundColor(.white).fontWeight(.medium) |
| 24 | + }.padding(.horizontal, 38).padding(.vertical, 8).background(.primary).cornerRadius(8) |
| 25 | + }.padding(.horizontal, 16).padding(.vertical, 8) |
| 26 | + } |
| 27 | + } |
| 28 | +} |
| 29 | + |
| 30 | +struct ItemPanel: View { |
| 31 | + let image: String |
| 32 | + let title: String |
| 33 | + let subtitle: String |
| 34 | + let price: String |
| 35 | + var desc: String = "Lorem Ipsum" |
| 36 | + |
| 37 | + @State private var isShowingItemView = false |
| 38 | + |
| 39 | + var body: some View { |
| 40 | + VStack { |
| 41 | + AsyncImage(url: URL(string: self.image)) { phase in |
| 42 | + if let image = phase.image { |
| 43 | + image.resizable().scaledToFill() |
| 44 | + } else { |
| 45 | + ProgressView() |
| 46 | + } |
| 47 | + }.frame(width: UIScreen.main.bounds.size.width - 32, height: 200).cornerRadius(8).clipped() |
| 48 | + HStack { |
| 49 | + VStack(alignment: .leading, spacing: 4) { |
| 50 | + VStack(alignment: .leading, spacing: 0) { |
| 51 | + Text(self.title).fontWeight(.medium).font(.caption) |
| 52 | + Text(self.subtitle).foregroundColor(.secondary).font(.caption) |
| 53 | + } |
| 54 | + Text(self.price).fontWeight(.medium).font(.caption) |
| 55 | + } |
| 56 | + Spacer() |
| 57 | + } |
| 58 | + }.onTapGesture { |
| 59 | + self.isShowingItemView.toggle() |
| 60 | + }.sheet(isPresented: self.$isShowingItemView) { |
| 61 | + VStack(alignment: .leading, spacing: 8) { |
| 62 | + ScrollView(.vertical) { |
| 63 | + AsyncImage(url: URL(string: self.image)) { phase in |
| 64 | + if let image = phase.image { |
| 65 | + image.resizable().scaledToFill() |
| 66 | + } else { |
| 67 | + ProgressView() |
| 68 | + } |
| 69 | + }.frame(width: UIScreen.main.bounds.size.width, height: 280) |
| 70 | + HStack { |
| 71 | + VStack(alignment: .leading, spacing: 4) { |
| 72 | + VStack(alignment: .leading, spacing: 0) { |
| 73 | + Text(self.title).fontWeight(.medium).font(.title) |
| 74 | + Text(self.subtitle).foregroundColor(.secondary).font(.subheadline) |
| 75 | + Text(self.desc).fontWeight(.light).padding(.top, 16) |
| 76 | + } |
| 77 | + } |
| 78 | + Spacer() |
| 79 | + }.padding() |
| 80 | + } |
| 81 | + ItemBuyButton( |
| 82 | + price: self.price, |
| 83 | + onAction: { |
| 84 | + self.isShowingItemView.toggle() |
| 85 | + } |
| 86 | + ) |
| 87 | + } |
| 88 | + } |
| 89 | + } |
| 90 | +} |
| 91 | + |
| 92 | +struct SearchBar: View { |
| 93 | + var body: some View { |
| 94 | + HStack(spacing: 12) { |
| 95 | + Image(systemName: "magnifyingglass").padding(.leading, 8) |
| 96 | + VStack(alignment: .leading) { |
| 97 | + Text("Where you want to visit?").font(.caption) |
| 98 | + Text("Any area").foregroundColor(.secondary).font(.caption) |
| 99 | + } |
| 100 | + Spacer() |
| 101 | + }.padding(8).background(.background).cornerRadius(8).shadow(color: .init(.sRGBLinear, white: 0, opacity: 0.08), radius: 4) |
| 102 | + } |
| 103 | +} |
| 104 | + |
| 105 | +struct Header: View { |
| 106 | + var body: some View { |
| 107 | + SearchBar().padding().background(.background) |
| 108 | + } |
| 109 | +} |
| 110 | + |
| 111 | +struct AppView: View { |
| 112 | + let items: [ItemPanel] = [ |
| 113 | + ItemPanel(image: "https://www.cairnsdiscoverytours.com/wp-content/uploads/2022/10/cairns-city-day-tours.jpg", title: "Cairns, Australia", subtitle: "A city in Queensland", price: "$800 round trip", desc: "Cairns is a vibrant and tropical city located in the far north of Queensland, Australia. Situated on the east coast, Cairns serves as the gateway to the Great Barrier Reef, one of the world's most renowned natural wonders. The city's stunning location between lush rainforests and the Coral Sea makes it a popular tourist destination."), |
| 114 | + ItemPanel(image: "https://lifeofdoing.com/wp-content/uploads/2020/05/5-Days-In-Kyoto-Itinerary-Higashiyama-District.jpg", title: "Kyoto, Japan", subtitle: "A city in Japan", price: "$300 round trip", desc: """ |
| 115 | +Kyoto, located in the Kansai region of Japan, is a city steeped in history, tradition, and natural beauty. As the former imperial capital of Japan for over a thousand years, Kyoto is renowned for its well-preserved historic sites, traditional culture, and stunning temples and gardens. |
| 116 | +"""), |
| 117 | + ItemPanel(image: "https://dynamic-media-cdn.tripadvisor.com/media/photo-o/1b/6c/16/ce/caption.jpg?w=1200&h=-1&s=1", title: "Sao paulo, Brazil", subtitle: "A city in Brazil", price: "$1800 round trip", desc: """ |
| 118 | +São Paulo, often referred to as Sampa, is a bustling metropolis and the largest city in Brazil. Located in the southeastern part of the country, São Paulo is a dynamic hub of culture, business, and diversity. It is known for its vibrant energy, impressive skyline, and a wide range of attractions that cater to various interests. |
| 119 | +"""), |
| 120 | + ItemPanel(image: "https://griffithobservatory.org/wp-content/uploads/2021/03/cameron-venti-c5GkEd-j5vI-unsplash_noCautionTape-1600x800-1638571089.jpg", title: "Los angeles, America", subtitle: "A city in California", price: "$900 round trip", desc: """ |
| 121 | +Los Angeles, often referred to as LA, is a vibrant and diverse city located on the west coast of the United States in Southern California. As the second-largest city in the country and the entertainment capital of the world, Los Angeles offers a unique blend of glamour, cultural richness, natural beauty, and a laid-back coastal lifestyle. |
| 122 | +"""), |
| 123 | + ItemPanel(image: "https://www.nationsonline.org/gallery/Madagascar/Allee-des-Baobabs-Madagascar.jpg", title: "Morondava, Madagascar", subtitle: "A city in Madagascar", price: "$1400 round trip", desc: """ |
| 124 | +Morondava is a charming coastal town located on the western coast of Madagascar. Situated in the Menabe region, Morondava is known for its breathtaking natural beauty, unique baobab trees, and laid-back atmosphere. It offers visitors a chance to experience the rich culture, stunning landscapes, and warm hospitality of Madagascar. |
| 125 | +""") |
| 126 | + ] |
| 127 | + @EnvironmentObject var nubrick: NubrickClient |
| 128 | + |
| 129 | + var body: some View { |
| 130 | + VStack(alignment: .leading, spacing: 0) { |
| 131 | + nubrick |
| 132 | + .experiment |
| 133 | + .embedding("HEADER_INFORMATION") { phase in |
| 134 | + switch phase { |
| 135 | + case .completed(let view): |
| 136 | + view.frame(height: 60) |
| 137 | + default: |
| 138 | + EmptyView().frame(height: 0) |
| 139 | + } |
| 140 | + } |
| 141 | + Header() |
| 142 | + ScrollView(.vertical) { |
| 143 | + nubrick |
| 144 | + .experiment |
| 145 | + .embedding("TOP_COMPONENT") { phase in |
| 146 | + switch phase { |
| 147 | + case .completed(let view): |
| 148 | + view.frame(width: nil, height: 280) |
| 149 | + default: |
| 150 | + EmptyView().frame(width: nil, height: 0) |
| 151 | + } |
| 152 | + } |
| 153 | + ForEach(self.items, id: \.title) { item in |
| 154 | + item.padding() |
| 155 | + } |
| 156 | + } |
| 157 | + } |
| 158 | + } |
| 159 | +} |
| 160 | + |
| 161 | +struct ContentView: View { |
| 162 | + var body: some View { |
| 163 | + AppView() |
| 164 | + } |
| 165 | +} |
| 166 | + |
| 167 | +#Preview { |
| 168 | + NubrickProvider(client: NubrickClient(projectId: "cgv3p3223akg00fod19g")) { |
| 169 | + ContentView() |
| 170 | + } |
| 171 | +} |
0 commit comments