IMAGE IMAGE

credit card view

@tweet

if you have an app that has something to do with payment, there is a high chance you would like to have a nice credit card view somewhere in there.

so...here it is πŸ˜‰ have fun with it!

// MARK: IMPORTANT🚨
/* For easy of copy/pastability, all code is in one big chunk.
Be a dear and refactor this out any way you see fit 🀘 */

/* Idealy, you would NOT be using pre-defined constants in this way, so keep that in mind.*/

import SwiftUI

/* Defining all constants used in the view.*/
fileprivate let lBgColor = Color(.displayP3, red: 248/255, green: 250/255, blue: 251/255, opacity: 1.0)
fileprivate let dBgColor = Color(.displayP3, red: 29/255, green: 19/255, blue: 44/255, opacity: 1.0)

fileprivate let lightShadowColor = Color(.displayP3, red: 242/255, green: 242/255, blue: 1, opacity: 1.0)
fileprivate let darkShadowColor = Color(.displayP3, red: 45/255, green: 26/255, blue: 88/255, opacity: 1.0)
fileprivate let darkFirstColor = Color(.displayP3, red: 1, green: 10/255, blue: 142/255, opacity: 1.0)
fileprivate let darkSecondColor = Color(.displayP3, red: 0.39, green: 0.1, blue: 0.9, opacity: 1.0)
fileprivate let lightFirstColor = Color(.displayP3, red: 225/255, green: 225/255, blue: 255/255, opacity: 1.0)
fileprivate let lightSecondColor = Color(.displayP3, red: 180/255, green: 190/255, blue: 255/255, opacity: 1.0)

fileprivate let lightGradient = LinearGradient(gradient: Gradient(colors: [lightFirstColor, lightSecondColor]),
startPoint: .leading, endPoint: .trailing)
fileprivate let darkGradient = LinearGradient(gradient: Gradient(colors: [darkFirstColor, darkSecondColor]),
startPoint: .topLeading, endPoint: .bottomTrailing)

fileprivate let titleFont = Font.system(size: 24, weight: .bold, design: .rounded)
fileprivate let detailFont = Font.system(size: 18, weight: .semibold, design: .rounded)
fileprivate let subtitleFont = Font.system(size: 16, weight: .medium, design: .rounded)

struct CreditCardView: View {
/*
Environtment is used just to make it easier to preview light and dark look in one view setup.
You should create a new semantic color in the assets and use it that way πŸ‘Œ
*/
@Environment(\.colorScheme) var colorScheme

var body: some View {

let gradinet = colorScheme == .dark ? darkGradient : lightGradient
let shadowColor = colorScheme == .dark ? darkShadowColor : lightShadowColor

ZStack {
RoundedRectangle(cornerRadius: 20)
.fill(gradinet)
.shadow(color: shadowColor, radius: 20, x: 0, y: 30)
VStack(spacing: 0) {
// MARK: Card Top ------------------
HStack {
VStack(alignment: .leading) {
Text("DATA")
.font(Font.system(size: 8, weight: .medium, design: .rounded))
HStack {
Text("123")
.fixedSize()
}
.font(titleFont)
}
Spacer()

// MARK: Monthly income?
VStack(alignment: .leading) {
Text("DATA")
.font(Font.system(size: 8, weight: .medium, design: .rounded))
Text("456")
.font(titleFont)
}
}
.padding(.top, 24)
.padding(.horizontal, 24)
.foregroundColor(.primary)

// MARK: Card Mid ------------------
VStack {
Spacer()
HStack {
ForEach(0 ..< 11) { item in
if item != 3 && item != 7 {
Circle()
.foregroundColor(.secondary)
} else {
Circle()
.opacity(0)
}
}
}
.frame(height: 16)
.fixedSize()
Spacer()
}
.padding(.horizontal, 24)

// MARK: Card Bottom ------------------
HStack {
VStack(alignment: .leading) {
Text("DATA")
.font(Font.system(size: 8, weight: .medium, design: .rounded))

Text("789")
.font(titleFont)
}
Spacer()

VStack(alignment: .leading) {
Text("data")
.font(Font.system(size: 8, weight: .medium, design: .rounded))
Text("emin")
.font(titleFont)
}
}
.padding(.bottom, 24)
.padding(.horizontal, 24)
}
}
.frame(height: 180)
.shadow(color: shadowColor, radius: 24)
}
}

struct CreditCardView_Previews: PreviewProvider {
static var previews: some View {
Group {
CreditCardView()
.padding(100)
.previewLayout(PreviewLayout.sizeThatFits)
.preferredColorScheme(.light)
.background(lBgColor)
CreditCardView()
.padding(100)
.previewLayout(PreviewLayout.sizeThatFits)
.preferredColorScheme(.dark)
.background(dBgColor)
}
}
}

/*
Awesome Sauce!
Thank you for getting one of my views, hope you are happy with it πŸ‘Œ
Consider helping this train rollin πŸš‚ on my Patreon -> https://www.patreon.com/swiftui
Or cup a coffee β˜•οΈ -> https://ko-fi.com/swiftui

If you have any suggestions for improvements,
feel free to reach me at undead.pix3l@gmail.com
*/