Reels Card

// Reels Card · syxUI · https://syxui.dev/components/media2-reels
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

// Reels / shorts card
struct ReelsCard: View {
    var body: some View {
        Image("photo_travel").resizable().scaledToFill().frame(width: 180, height: 300).clipped()
            .overlay { LinearGradient(colors: [.clear, .black.opacity(0.5)], startPoint: .center, endPoint: .bottom) }
            .overlay(alignment: .bottomLeading) {
                VStack(alignment: .leading, spacing: 6) {
                    Text("@wanderlust").font(.system(size: 13, weight: .semibold)).foregroundStyle(.white)
                    Text("Sunset in Santorini").font(.system(size: 12)).foregroundStyle(.white.opacity(0.9))
                }.padding(12)
            }
            .overlay(alignment: .bottomTrailing) {
                VStack(spacing: 18) {
                    Image(systemName: "heart.fill").font(.system(size: 23)).foregroundStyle(.white)
                    Image(systemName: "message.fill").font(.system(size: 21)).foregroundStyle(.white)
                    Image(systemName: "paperplane.fill").font(.system(size: 21)).foregroundStyle(.white)
                }.shadow(color: .black.opacity(0.3), radius: 4).padding(.trailing, 14).padding(.bottom, 52)
            }
            .frame(width: 180, height: 300)
            .clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
    }
}