// // ContentMainRankingView.swift // SodaLive // // Created by klaus on 2023/10/15. // import SwiftUI import Kingfisher struct ContentMainRankingView: View { let sorts: [String] let item: GetAudioContentRanking let selectSort: (String) -> Void @Binding var selectedSort: String let rows = [ GridItem(.fixed(60), alignment: .leading), GridItem(.fixed(60), alignment: .leading), GridItem(.fixed(60), alignment: .leading) ] var body: some View { VStack(spacing: 0) { HStack(spacing: 0) { Text("인기 콘텐츠") .font(.custom(Font.bold.rawValue, size: 18.3)) .foregroundColor(Color(hex: "eeeeee")) Spacer() Image("ic_forward") .onTapGesture { AppState.shared.setAppStep(step: .contentRankingAll) } } VStack(spacing: 8) { Text("\(item.startDate) ~ \(item.endDate)") .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) ContentMainRankingSortView(sorts: sorts, selectSort: selectSort, selectedSort: $selectedSort) .padding(.vertical, 16.7) ScrollView(.horizontal, showsIndicators: false) { LazyHGrid(rows: rows, spacing: 13.3) { ForEach(0..<item.items.count, id: \.self) { index in let content = item.items[index] HStack(spacing: 0) { KFImage(URL(string: content.coverImageUrl)) .resizable() .frame(width: 60, height: 60) .cornerRadius(2.7) Text("\(index + 1)") .font(.custom(Font.bold.rawValue, size: 16.7)) .foregroundColor(Color(hex: "3bb9f1")) .padding(.horizontal, 12) VStack(alignment: .leading, spacing: 8) { Text(content.title) .lineLimit(2) .font(.custom(Font.medium.rawValue, size: 13.3)) .foregroundColor(Color(hex: "d2d2d2")) Text(content.creatorNickname) .font(.custom(Font.medium.rawValue, size: 11)) .foregroundColor(Color(hex: "777777")) } } .frame(maxWidth: screenSize().width * 0.66, alignment: .leading) .contentShape(Rectangle()) .onTapGesture { AppState .shared .setAppStep(step: .contentDetail(contentId: content.contentId)) } } } .frame(height: 207) } .padding(.top, 13.3) } } } struct ContentMainRankingView_Previews: PreviewProvider { static var previews: some View { ContentMainRankingView( sorts: ["매출", "후원", "댓글"], item: GetAudioContentRanking( startDate: "2023년 10월 2일", endDate: "10월 9일", items: [ GetAudioContentRankingItem( contentId: 10, title: "sdffsfddfs", coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456", themeStr: "커버곡", price: 10, duration: "00:30:20", creatorId: 1, creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ" ), GetAudioContentRankingItem( contentId: 10, title: "sdffsfddfs", coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456", themeStr: "커버곡", price: 10, duration: "00:30:20", creatorId: 1, creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ" ), GetAudioContentRankingItem( contentId: 10, title: "sdffsfddfs", coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456", themeStr: "커버곡", price: 10, duration: "00:30:20", creatorId: 1, creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ" ), GetAudioContentRankingItem( contentId: 10, title: "sdffsfddfs", coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456", themeStr: "커버곡", price: 10, duration: "00:30:20", creatorId: 1, creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ" ), ] ), selectSort: { _ in }, selectedSort: .constant("매출") ) } }