AllDev
/
Apple
6
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

betcard component finished

Browse Source
Menu
lucas delanier 2 years ago
parent ca0935e6e6
commit 242d3bea2d
8 changed files with 207 additions and 45 deletions
Show Stats Download Patch File Download Diff File

38
Sources/allin/allin/Assets.xcassets/BackgroundWhite.colorset/Contents.json
Unescape View File

@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xF6",
"green" : "0xEB",
"red" : "0xEB"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "display-p3",
"components" : {
"alpha" : "1.000",
"blue" : "0x26",
"green" : "0x24",
"red" : "0x25"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

38
Sources/allin/allin/Assets.xcassets/BlueAccent.colorset/Contents.json
Unescape View File

@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xEF",
"green" : "0x9F",
"red" : "0x1A"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xEF",
"green" : "0x9F",
"red" : "0x1A"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

10
Sources/allin/allin/ContentView.swift
Unescape View File

@ -9,12 +9,14 @@ import SwiftUI
struct ContentView: View {
var body: some View {
VStack(alignment: .center) {
VStack(alignment: .center, spacing: 0) {
TopBarView()
TrendingBetCard()}
.edgesIgnoringSafeArea(.top)
ScrollView{
TrendingBetCard().padding(.top, 20)
}.background(AllinColor.backgroundWhite)
}
.edgesIgnoringSafeArea([.bottom])
.frame(alignment: .top)
}
}

22
Sources/allin/allin/Extensions/Extensions.swift
Unescape View File

@ -33,3 +33,25 @@ struct RoundedCorner: Shape {
return Path(path.cgPath)
}
}
extension View {
func border(width: CGFloat, edges: [Edge], color: Color) -> some View {
overlay(EdgeBorder(width: width, edges: edges).foregroundColor(color))
}
}
struct EdgeBorder: Shape {
var width: CGFloat
var edges: [Edge]
func path(in rect: CGRect) -> Path {
edges.map { edge -> Path in
switch edge {
case .top: return Path(.init(x: rect.minX, y: rect.minY, width: rect.width, height: width))
case .bottom: return Path(.init(x: rect.minX, y: rect.maxY - width, width: rect.width, height: width))
case .leading: return Path(.init(x: rect.minX, y: rect.minY, width: width, height: rect.height))
case .trailing: return Path(.init(x: rect.maxX - width, y: rect.minY, width: width, height: rect.height))
}
}.reduce(into: Path()) { $0.addPath($1) }
}
}

7
Sources/allin/allin/Ressources/Colors.swift
Unescape View File

@ -12,4 +12,11 @@ struct AllinColor {
static let darkGray = Color("DarkGray")
static let darkerGray = Color("DarkerGray")
static let pinkAccentText = Color("PinkAccentText")
static let backgroundWhite = Color("BackgroundWhite")
static let blueAccent = Color("BlueAccent")
static let gradiantCard = LinearGradient(
gradient: Gradient(colors: [AllinColor.pinkAccentText, AllinColor.blueAccent]),
startPoint: .bottomLeading,
endPoint: .topTrailing
)
}

28
Sources/allin/allin/Views/GradiantCard.swift
Unescape View File

@ -0,0 +1,28 @@
//
// GradiantCard.swift
// AllIn
//
// Created by étudiant on 21/09/2023.
//
import SwiftUI
struct GradiantCard: View{
var body: some View {
Rectangle()
.stroke(
LinearGradient(
gradient: AllinColor.gradiantCard,
startPoint: .topLeading,
endPoint: .bottomTrailing
),
lineWidth: 5
)
}
}
struct GradiantCard_Previews: PreviewProvider {
static var previews: some View {
GradiantCard()
}
}

18
Sources/allin/allin/Views/TopBarView.swift
Unescape View File

@ -12,29 +12,27 @@ struct TopBarView: View {
let TopBarColorPink = Color(red: 249/255, green: 81/255, blue: 168/255)
let TopBarColorBlue = Color(red: 25/255, green: 159/255, blue: 238/255)
let TopBarColorPurple = Color(red: 170/255, green: 126/255, blue: 243/255)
GeometryReader { geometry in
ZStack() {
HStack(){
ZStack{
HStack{
Image("menu")
.resizable()
.frame(width: 26,height: 15)
.padding(.leading, 30)
Spacer()
CoinCounterView()
}
.frame(width: geometry.size.width,alignment: .trailing)
.frame(alignment: .top)
.padding(.leading, 20)
Image("Icon")
.resizable()
.frame(width: 40, height: 40, alignment: .bottom)
.padding(.all, 22)
}
.frame(width: geometry.size.width, height: 120, alignment: .bottom)
.padding([.bottom], 20)
.padding([.top], 10)
.background(LinearGradient(gradient:
Gradient(colors:[TopBarColorPink,TopBarColorPurple,TopBarColorBlue]),
startPoint: .bottomLeading, endPoint: .topTrailing))
}
}
}
}

91
Sources/allin/allin/Views/TrendingBetCard.swift
Unescape View File

@ -7,48 +7,77 @@
import SwiftUI
// Define a custom view modifier for text styling
struct BetText: ViewModifier {
var weight: Font.Weight
var color: Color
var size: CGFloat
func body(content: Content) -> some View {
content
.fontWeight(weight)
.foregroundColor(color)
.font(.system(size: size))
}
}
extension View {
func betTextStyle(weight: Font.Weight, color: Color, size: CGFloat) -> some View {
self.modifier(BetText(weight: weight, color: color, size: size))
}
}
struct TrendingBetCard: View {
var body: some View {
VStack(alignment: .leading){
HStack{
VStack(alignment: .leading) {
HStack {
Image("Trending")
.resizable()
.frame(width: 15, height: 15, alignment: .leading)
Text("Populaire")
.fontWeight(.medium)
.foregroundColor(AllinColor.pinkAccentText)
}.padding([.leading,.top],10)
.betTextStyle(weight: .medium, color: AllinColor.pinkAccentText, size: 17)
}
.padding([.leading, .top], 10)
Text("Emre va réussir son TP de CI/CD mercredi?")
.frame(height: 47)
.fontWeight(.heavy)
.foregroundColor(Color.white)
.betTextStyle(weight: .heavy, color: .white, size: 17)
.multilineTextAlignment(.leading)
.padding([.leading,.trailing],33)
.font(.system(size: 17))
Spacer()
GeometryReader { geometry in HStack(alignment: .center,spacing: 0){
Text("12")
.fontWeight(.bold)
.foregroundColor(AllinColor.pinkAccentText)
.font(.system(size: 14))
Text("joueurs")
.fontWeight(.regular)
.foregroundColor(Color.white).padding([.leading],2)
.font(.system(size: 14))
Text("2.35k")
.fontWeight(.bold)
.foregroundColor(AllinColor.pinkAccentText)
.padding([.leading],10)
.font(.system(size: 14))
Text("points misés")
.fontWeight(.regular)
.foregroundColor(Color.white).padding([.leading],2)
.font(.system(size: 14))
}.padding([.leading,.bottom,.trailing],5).frame( width: geometry.size.width,height:geometry.size.height, alignment: .bottom)}
.padding([.leading, .trailing], 33)
Spacer()
}.frame(width: 344, height: 127, alignment: .topLeading).background(AllinColor.darkerGray)
.clipShape(RoundedRectangle(cornerRadius: 17, style: .continuous))
GeometryReader { geometry in
HStack(alignment: .center, spacing: 0) {
Text("12")
.betTextStyle(weight: .bold, color: AllinColor.pinkAccentText, size: 14)
Text("joueurs")
.betTextStyle(weight: .regular, color: .white, size: 14)
.padding([.leading], 2)
Text("2.35k")
.betTextStyle(weight: .bold, color: AllinColor.pinkAccentText, size: 14)
.padding([.leading], 10)
Text("points misés")
.betTextStyle(weight: .regular, color: .white, size: 14)
.padding([.leading], 2)
}
.padding([.leading, .bottom, .trailing], 10)
.frame(width: geometry.size.width, height: geometry.size.height, alignment: .bottom)
}
}
.frame(height: 127, alignment: .topLeading)
.background(AllinColor.darkerGray)
.overlay(
RoundedRectangle(cornerRadius: 20, style: .continuous)
.stroke(AllinColor.gradiantCard, lineWidth: 5)
)
.clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
.padding([.leading, .trailing], 20)
}
}

Write Preview
Loading…
Cancel
Save