94 lines
3.5 KiB
Swift
94 lines
3.5 KiB
Swift
import SwiftUI
|
|
|
|
struct MainContentAudioRankingTopCard: View {
|
|
let item: AudioRankingItemResponse
|
|
let showRankChange: Bool
|
|
let onTapContent: (Int) -> Void
|
|
|
|
var body: some View {
|
|
Button {
|
|
onTapContent(item.contentId)
|
|
} label: {
|
|
GeometryReader { proxy in
|
|
let width = proxy.size.width
|
|
let imageSide = min(width * 0.42, proxy.size.height * 0.65)
|
|
|
|
ZStack(alignment: .topLeading) {
|
|
DownsampledKFImage(
|
|
url: URL(string: item.coverImageUrl ?? ""),
|
|
size: CGSize(width: width, height: proxy.size.height)
|
|
)
|
|
.background(Color.gray800)
|
|
.blur(radius: 10)
|
|
|
|
Color.black.opacity(0.1)
|
|
|
|
LinearGradient(
|
|
colors: [Color.black.opacity(0), Color.black.opacity(0.72)],
|
|
startPoint: .top,
|
|
endPoint: .bottom
|
|
)
|
|
|
|
rankColumn
|
|
.padding(.leading, SodaSpacing.s20)
|
|
.padding(.top, SodaSpacing.s4)
|
|
|
|
VStack(spacing: SodaSpacing.s8) {
|
|
DownsampledKFImage(
|
|
url: URL(string: item.coverImageUrl ?? ""),
|
|
size: CGSize(width: imageSide, height: imageSide)
|
|
)
|
|
.background(Color.gray800)
|
|
.aspectRatio(1, contentMode: .fill)
|
|
.clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
|
|
.shadow(color: Color.black.opacity(0.2), radius: 15)
|
|
|
|
VStack(spacing: 0) {
|
|
Text(item.title)
|
|
.appFont(size: 22, weight: .bold)
|
|
.foregroundColor(.white)
|
|
.lineLimit(1)
|
|
.truncationMode(.tail)
|
|
|
|
Text(item.creatorNickname)
|
|
.appFont(.caption1)
|
|
.foregroundColor(.white)
|
|
.lineLimit(1)
|
|
.truncationMode(.tail)
|
|
}
|
|
.frame(maxWidth: .infinity)
|
|
}
|
|
.padding(.horizontal, SodaSpacing.s20)
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
|
|
}
|
|
.clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
|
|
}
|
|
.aspectRatio(1.57, contentMode: .fit)
|
|
}
|
|
.buttonStyle(.plain)
|
|
}
|
|
|
|
private var rankColumn: some View {
|
|
VStack(alignment: .center, spacing: -20) {
|
|
Text("\(item.rank)")
|
|
.appFont(size: 96, family: .pattaya)
|
|
.foregroundStyle(
|
|
LinearGradient(
|
|
colors: [.white, Color.gray200],
|
|
startPoint: .top,
|
|
endPoint: .bottom
|
|
)
|
|
)
|
|
.shadow(color: Color.black.opacity(0.48), radius: 2)
|
|
.lineLimit(1)
|
|
|
|
MainContentRankChangeBadge(
|
|
showRankChange: showRankChange,
|
|
rankChange: item.rankChange,
|
|
isNew: item.isNew
|
|
)
|
|
}
|
|
.frame(width: 86, alignment: .center)
|
|
}
|
|
}
|