Bernt
6de2455917
- Added GLOBAL_MARKETS_TITLE to all translation files - Updated footer with 12 markets (4 active + 8 upcoming) - Translated market section to: zh-cn, zh-tw, ja, ko, th, vi, id, ms, hi - Built and deployed to production - CloudFront invalidation: I3RTMXVFDJXWLG3SYX208OP1CC
116 lines
3.4 KiB
Swift
116 lines
3.4 KiB
Swift
import SwiftUI
|
|
|
|
enum TrendDirection {
|
|
case up, down, neutral
|
|
|
|
var symbol: String {
|
|
switch self {
|
|
case .up: return "arrow.up"
|
|
case .down: return "arrow.down"
|
|
case .neutral: return "minus"
|
|
}
|
|
}
|
|
|
|
var color: Color {
|
|
switch self {
|
|
case .up: return Color(.systemGreen)
|
|
case .down: return Color(.systemRed)
|
|
case .neutral: return Color(.systemGray)
|
|
}
|
|
}
|
|
}
|
|
|
|
struct MetricCard: View {
|
|
let icon: String
|
|
let value: String
|
|
let label: String
|
|
let trend: TrendDirection
|
|
let accentColor: Color
|
|
var backgroundColor: Color = Color(.secondarySystemBackground)
|
|
|
|
var body: some View {
|
|
VStack(alignment: .leading, spacing: 8) {
|
|
HStack(alignment: .top) {
|
|
Image(systemName: icon)
|
|
.font(.system(size: 16, weight: .semibold))
|
|
.foregroundStyle(accentColor)
|
|
.frame(width: 32, height: 32)
|
|
.background(accentColor.opacity(0.15))
|
|
.clipShape(RoundedRectangle(cornerRadius: 8))
|
|
|
|
Spacer()
|
|
|
|
Image(systemName: trend.symbol)
|
|
.font(.system(size: 11, weight: .bold))
|
|
.foregroundStyle(trend.color)
|
|
.padding(5)
|
|
.background(trend.color.opacity(0.12))
|
|
.clipShape(Circle())
|
|
}
|
|
|
|
Text(value)
|
|
.font(.system(size: 26, weight: .bold, design: .rounded))
|
|
.foregroundStyle(.primary)
|
|
.lineLimit(1)
|
|
.minimumScaleFactor(0.6)
|
|
|
|
Text(label)
|
|
.font(.system(size: 12, weight: .medium))
|
|
.foregroundStyle(.secondary)
|
|
.lineLimit(2)
|
|
}
|
|
.padding(16)
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
.background(backgroundColor)
|
|
.clipShape(RoundedRectangle(cornerRadius: 12))
|
|
}
|
|
}
|
|
|
|
#Preview {
|
|
ScrollView {
|
|
LazyVStack(spacing: 8) {
|
|
HStack(spacing: 8) {
|
|
MetricCard(
|
|
icon: "cpu",
|
|
value: "72%",
|
|
label: "CPU Usage",
|
|
trend: .up,
|
|
accentColor: Color(.systemBlue)
|
|
)
|
|
MetricCard(
|
|
icon: "memorychip",
|
|
value: "3.2 GB",
|
|
label: "Memory",
|
|
trend: .down,
|
|
accentColor: Color(.systemGreen)
|
|
)
|
|
}
|
|
HStack(spacing: 8) {
|
|
MetricCard(
|
|
icon: "exclamationmark.triangle",
|
|
value: "14",
|
|
label: "Active Alerts",
|
|
trend: .up,
|
|
accentColor: Color(.systemOrange)
|
|
)
|
|
MetricCard(
|
|
icon: "network",
|
|
value: "99.8%",
|
|
label: "Uptime",
|
|
trend: .neutral,
|
|
accentColor: Color(.systemBlue)
|
|
)
|
|
}
|
|
MetricCard(
|
|
icon: "arrow.down.circle",
|
|
value: "1.24 GB/s",
|
|
label: "Ingest throughput (last 5 min)",
|
|
trend: .down,
|
|
accentColor: Color(.systemRed)
|
|
)
|
|
}
|
|
.padding()
|
|
}
|
|
.background(Color(.systemBackground))
|
|
}
|