Mã sẵn sàng

import SwiftUI

struct PulseProfileGrid: View {
    private let accent = Color.pink

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            HStack(spacing: 16) {
                Circle()
                    .fill(accent.opacity(0.18))
                    .frame(width: 84, height: 84)
                    .overlay {
                        Text("CM")
                            .font(.headline)
                    }

                VStack(alignment: .leading, spacing: 8) {
                    Text("Pulse Profile Grid")
                        .font(.system(size: 28, weight: .bold, design: .rounded))
                    Text("12.4K followers • 214 posts")
                        .foregroundStyle(.secondary)
                }

                Spacer()

                RoundedRectangle(cornerRadius: 18, style: .continuous)
                    .fill(accent)
                    .frame(width: 104, height: 44)
                    .overlay {
                        Text("Follow")
                            .foregroundStyle(.white)
                            .font(.headline)
                    }
            }

            LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 14) {
                ForEach(0..<4, id: \.self) { index in
                    RoundedRectangle(cornerRadius: 24, style: .continuous)
                        .fill(index == 0 ? accent.opacity(0.18) : Color.white)
                        .frame(height: index == 0 ? 180 : 120)
                }
            }
        }
        .padding(24)
        .background(Color(.systemGroupedBackground))
    }
}

Pulse Profile Grid

A social profile surface with stats, pinned cards, and lively follow CTAs.

Giá

Miễn phí

Xã hội

Người sáng tạo

Chia sẻ

Chia sẻ trên XLinkedInReddit
Pulse Profile Grid preview

Cập nhật lần cuối

Tán thành

18 thg 3, 2026

Phiên bản 1 · Pulse Profile Grid

Added pinned-story badges and denser grid breakpoints.

Người sáng tạo: Demo Creator

Xem tất cả