// // SectionRecommendChannelView.swift // SodaLive // // Created by klaus on 2023/08/09. // import SwiftUI import Kingfisher struct SectionRecommendChannelView: View { let items: [GetRecommendChannelResponse] @Binding var isFollowingList: Bool var body: some View { VStack(spacing: 21.3) { HStack(spacing: 0) { if isFollowingList { Text("팔로잉 ") .font(.custom(Font.bold.rawValue, size: 18.3)) .foregroundColor(Color(hex: "eeeeee")) } else { Text("추천 ") .font(.custom(Font.bold.rawValue, size: 18.3)) .foregroundColor(Color(hex: "eeeeee")) } Text("채널") .font(.custom(Font.bold.rawValue, size: 18.3)) .foregroundColor(Color(hex: "3bb9f1")) Spacer() Text("팔로잉 채널") .font(.custom(Font.medium.rawValue, size: 13.3)) .foregroundColor(Color(hex: "777777")) Image(isFollowingList ? "btn_toggle_on_big" : "btn_toggle_off_big") .resizable() .frame(width: 33.3, height: 20) .padding(.leading, 6.7) .onTapGesture { isFollowingList.toggle() } } .frame(width: screenSize().width - 26.7, alignment: .leading) ScrollView(.horizontal, showsIndicators: false) { HStack(spacing: 21.3) { ForEach(0..<items.count, id: \.self) { index in let item = items[index] VStack(spacing: 13.3) { ZStack(alignment: .bottom) { KFImage(URL(string: item.profileImageUrl)) .resizable() .scaledToFill() .frame(width: screenSize().width * 0.18, height: screenSize().width * 0.18, alignment: .center) .cornerRadius(screenSize().width * 0.09) .overlay( Circle() .strokeBorder(lineWidth: 3) .foregroundColor( Color(hex: "3bb9f1") .opacity(item.isOnAir ? 1 : 0) ) ) if item.isOnAir { Text("Live") .font(.custom(Font.bold.rawValue, size: 8.7)) .foregroundColor(.white) .padding(.vertical, 2.7) .padding(.horizontal, 5.7) .background(Color(hex: "3bb9f1")) .cornerRadius(6.7) } } Text(item.nickname) .font(.custom(Font.medium.rawValue, size: 11.3)) .foregroundColor(Color(hex: "bbbbbb")) .frame(width: screenSize().width * 0.18) .lineLimit(1) } .onTapGesture { AppState.shared.setAppStep( step: .creatorDetail(userId: item.creatorId) ) } } if isFollowingList { VStack(spacing: 10.7) { Image("btn_item_more") .resizable() .frame(width: screenSize().width * 0.18, height: screenSize().width * 0.18, alignment: .center) Text("더보기") .font(.custom(Font.medium.rawValue, size: 11.3)) .foregroundColor(Color(hex: "bbbbbb")) .frame(width: screenSize().width * 0.18) .lineLimit(1) } .onTapGesture { AppState.shared.setAppStep(step: .followingList) } } } } } } } struct SectionRecommendChannelView_Previews: PreviewProvider { static var previews: some View { SectionRecommendChannelView( items: [ GetRecommendChannelResponse(creatorId: 1, nickname: "크리에이터1", profileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png", isOnAir: true), GetRecommendChannelResponse(creatorId: 2, nickname: "크리에이터2", profileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png", isOnAir: false), GetRecommendChannelResponse(creatorId: 3, nickname: "크리에이터3", profileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png", isOnAir: false) ], isFollowingList: .constant(true) ) } }