// // ExplorerSectionView.swift // SodaLive // // Created by klaus on 2023/10/14. // import SwiftUI import Kingfisher struct ExplorerSectionView: View { let section: GetExplorerSectionResponse let rankingCrawns = ["ic_crown_1", "ic_crown_2", "ic_crown_3"] let rankingColors = [ [Color(hex: "ffdc00"), Color(hex: "ffb600")], [Color(hex: "ffffff"), Color(hex: "9f9f9f")], [Color(hex: "e6a77a"), Color(hex: "c67e4a")], [Color(hex: "ffffff").opacity(0), Color(hex: "ffffff").opacity(0)] ] var body: some View { VStack(alignment: .leading, spacing: 13.3) { VStack(alignment: .leading, spacing: 4) { if let coloredTitle = section.coloredTitle, let color = section.color { let titleArray = section.title.components(separatedBy: coloredTitle) HStack(spacing: 0) { Text(titleArray[0]) .font(.custom(Font.bold.rawValue, size: 18.3)) .foregroundColor(Color(hex: "eeeeee")) Text(coloredTitle) .font(.custom(Font.bold.rawValue, size: 18.3)) .foregroundColor(Color(hex: color)) if titleArray.count > 1 { Text(titleArray[1]) .font(.custom(Font.bold.rawValue, size: 18.3)) .foregroundColor(Color(hex: "eeeeee")) } } } else { Text(section.title) .font(.custom(Font.bold.rawValue, size: 18.3)) .foregroundColor(Color(hex: "eeeeee")) } if let desc = section.desc { VStack(spacing: 8) { Text("\(desc)") .font(.custom(Font.bold.rawValue, size: 14.7)) .foregroundColor(Color(hex: "eeeeee")) Text("※ 인기 크리에이터의 순위는 매주 업데이트됩니다.") .font(.custom(Font.light.rawValue, size: 13.3)) .foregroundColor(Color(hex: "bbbbbb")) } .padding(.vertical, 8) .frame(width: screenSize().width - 26.7) .background(Color(hex: "222222")) .padding(.top, 13.3) } } .frame(width: screenSize().width - 26.7, alignment: .leading) ScrollView(.horizontal, showsIndicators: false) { HStack(spacing: 13.3) { ForEach(0..<section.creators.count, id: \.self) { index in let creator = section.creators[index] VStack(spacing: 0) { if let _ = section.desc { ZStack { KFImage(URL(string: creator.profileImageUrl)) .cancelOnDisappear(true) .downsampling(size: CGSize(width: 90, height: 90)) .resizable() .clipShape(Circle()) .frame(width: 90, height: 90) .overlay( Circle() .stroke( AngularGradient(colors: rankingColors[index < 4 ? index : 3], center: .center), lineWidth: 3 ) ) if index < 3 { VStack(alignment: .trailing, spacing: 0) { Spacer() Image(rankingCrawns[index]) .resizable() .frame(width: 37, height: 37) } .frame(width: 93.3, height: 93.3, alignment: .trailing) } } .frame(width: 93.3, height: 93.3) } else { KFImage(URL(string: creator.profileImageUrl)) .cancelOnDisappear(true) .downsampling(size: CGSize(width: 93, height: 93)) .resizable() .clipShape(Circle()) .frame(width: 93, height: 93) } Text(creator.nickname) .font(.custom(Font.medium.rawValue, size: 11.3)) .foregroundColor(Color(hex: "eeeeee")) .lineLimit(1) .frame(width: 93.3) .padding(.top, 13.3) Text(creator.tags) .font(.custom(Font.medium.rawValue, size: 10)) .foregroundColor(Color(hex: "3bb9f1")) .lineLimit(1) .frame(width: 93.3) .padding(.top, 3.3) } .contentShape(Rectangle()) .onTapGesture { AppState.shared .setAppStep(step: .creatorDetail(userId: creator.id)) } } } } .frame(width: screenSize().width - 26.7, alignment: .leading) } } } struct ExplorerSectionView_Previews: PreviewProvider { static var previews: some View { ExplorerSectionView( section: GetExplorerSectionResponse( title: "", coloredTitle: nil, color: nil, desc: nil, creators: [] ) ) } }