[Xcode/SwiftUI] SNSアプリのHOME画面フレームみたいなもの

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(alignment: .leading, spacing: 10) {
                    headerView()
                    postDetailView(postCount: 5)
                }
            }
            .navigationTitle("Instagram")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {}) {
                        Image(systemName: "camera")
                            .foregroundStyle(.black)
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {}) {
                        Image(systemName: "paperplane")
                            .foregroundStyle(.black)
                    }
                }
            }
        }
    }

    @ViewBuilder
    private func headerView() -> some View {
        Text("Stories")
            .font(.system(size: 20, design: .default))
            .foregroundStyle(.black)
            .padding(.leading)

        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 10) {
                ForEach(0..<10) { _ in
                    VStack {
                        Image(systemName: "person.circle")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 60, height: 60)
                            .clipShape(Circle())
                            .overlay(Circle().stroke(Color(red: 230 / 255, green: 230 / 255, blue: 232 / 255), lineWidth: 1.5))

                        Text("Username")
                            .font(.system(size: 12, design: .default))
                            .foregroundStyle(.black)
                    }
                }
            }
            .padding(.horizontal)
        }
    }

    @ViewBuilder
    private func postDetailView(postCount: Int) -> some View {
        ForEach(0..<postCount) { _ in
            VStack(alignment: .leading, spacing: 10) {
                HStack {
                    Image(systemName: "person.circle")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 30, height: 30)
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color(red: 230 / 255, green: 230 / 255, blue: 232 / 255), lineWidth: 1.5))

                    VStack(alignment: .leading, spacing: 2) {
                        Text("Username")
                            .foregroundStyle(.black)

                        Text("Location")
                            .font(.system(size: 12, design: .default))
                            .foregroundStyle(Color(red: 138 / 255, green: 138 / 255, blue: 138 / 255))
                    }

                    Spacer()

                    Button(action: {}) {
                        Image(systemName: "ellipsis")
                            .foregroundStyle(.black)
                    }
                }

                Image("img_hokuto")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(height: 320)
                    .clipped()

                HStack {
                    Button(action: {}) {
                        Image(systemName: "heart")
                            .foregroundStyle(.black)
                    }

                    Button(action: {}) {
                        Image(systemName: "bubble.right")
                            .foregroundStyle(.black)
                    }

                    Button(action: {}) {
                        Image(systemName: "paperplane")
                            .foregroundStyle(.black)
                    }

                    Spacer()

                    Button(action: {}) {
                        Image(systemName: "bookmark")
                            .foregroundStyle(.black)
                    }
                }
                .padding(.vertical)

                Text("Liked by username and others")
                    .foregroundStyle(.black)

                Text("Caption")
                    .foregroundStyle(.black)

                Text("View all comments")
                    .font(.system(size: 12, design: .default))
                    .foregroundStyle(Color(red: 138 / 255, green: 138 / 255, blue: 138 / 255))

                Text("2 hours ago")
                    .font(.system(size: 12, design: .default))
                    .foregroundStyle(Color(red: 138 / 255, green: 138 / 255, blue: 138 / 255))
            }
            .padding(.horizontal)
        }
    }
}