Vercel Analytics

1import SwiftUI
2
3struct VercelAnalyticsView: View {
4    @State private var selectedMetric = "pageviews"
5    
6    let metrics = [
7        ("pageviews", "Page Views", "123.4K", Color.blue),
8        ("visitors", "Visitors", "45.2K", Color.green),
9        ("bounce-rate", "Bounce Rate", "32.1%", Color.orange),
10        ("avg-session", "Avg Session", "2m 34s", Color.purple)
11    ]
12    
13    var body: some View {
14        VStack(alignment: .leading, spacing: 20) {
15            HStack {
16                Text("Vercel Analytics")
17                    .font(.title2)
18                    .fontWeight(.semibold)
19                Spacer()
20                Button("Export") {
21                    // Export functionality
22                }
23                .buttonStyle(.bordered)
24            }
25            
26            LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 2), spacing: 16) {
27                ForEach(metrics, id: \.0) { metric in
28                    MetricCard(
29                        title: metric.1,
30                        value: metric.2,
31                        color: metric.3,
32                        isSelected: selectedMetric == metric.0
33                    ) {
34                        selectedMetric = metric.0
35                    }
36                }
37            }
38            
39            VStack(alignment: .leading, spacing: 12) {
40                Text("Performance")
41                    .font(.headline)
42                
43                HStack {
44                    VStack(alignment: .leading) {
45                        Text("Core Web Vitals")
46                            .font(.subheadline)
47                        Text("Good")
48                            .font(.caption)
49                            .foregroundColor(.green)
50                    }
51                    Spacer()
52                    VStack(alignment: .trailing) {
53                        Text("98")
54                            .font(.title2)
55                            .fontWeight(.bold)
56                        Text("Score")
57                            .font(.caption)
58                            .foregroundColor(.secondary)
59                    }
60                }
61                .padding()
62                .background(Color(.systemGray6))
63                .cornerRadius(8)
64            }
65        }
66        .padding(20)
67        .background(Color(.systemBackground))
68        .cornerRadius(12)
69        .shadow(radius: 4)
70    }
71}
72
73struct MetricCard: View {
74    let title: String
75    let value: String
76    let color: Color
77    let isSelected: Bool
78    let action: () -> Void
79    
80    var body: some View {
81        Button(action: action) {
82            VStack(alignment: .leading, spacing: 8) {
83                Text(title)
84                    .font(.caption)
85                    .foregroundColor(.secondary)
86                
87                Text(value)
88                    .font(.title3)
89                    .fontWeight(.bold)
90                    .foregroundColor(color)
91            }
92            .frame(maxWidth: .infinity, alignment: .leading)
93            .padding()
94            .background(isSelected ? color.opacity(0.1) : Color(.systemGray6))
95            .cornerRadius(8)
96            .overlay(
97                RoundedRectangle(cornerRadius: 8)
98                    .stroke(isSelected ? color : Color.clear, lineWidth: 2)
99            )
100        }
101        .buttonStyle(.plain)
102    }
103}
104
105struct VercelAnalyticsView_Previews: PreviewProvider {
106    static var previews: some View {
107        VercelAnalyticsView()
108    }
109}