OCChallengeCard: UI component

The OCChallengeCard is a customizable card view for displaying challenge card details. It can include a image, title, information items array, date, runningDays and oprogressBar. The appearance of the card can be customized using different challenge card type and background color.

Features

• User can pass the desired details to show like title, information items array, style, imageType and progressTrack.
• In style, user can change card type like active, inActive, completed, active-check-pending and failed status.

Installation

1. Copy the ChallengeCard component folder into your Xcode project.

2. Use the OCChallengeCard view in your SwiftUI code:

Parameters:

• title : Title of the challenge card
• challengeInformation : ChallengeInformation is an array of challenge card items
• style : Type to select different challenge card like active, inActive, completed, active-check-pending and failed
• imageType : Display different type like local or url
• progressTrack : It includes date, runningDays, progressBarTitle, currentProgresValue and totalProgressValue

import SwiftUI

struct ContentView: View {
  
    var body: some View {
                VStack {
                OCChallengeCard(
                title: "Title",
                challengeInformation: [OCChallengeInformation(icon: "LargeIcon", informationItem: "Challenge info item 1"),
                                       OCChallengeInformation(icon: "LargeIcon", informationItem: "Challenge info item 2"),
                                       OCChallengeInformation(icon: "LargeIcon", informationItem: "Challenge info item 3")],
                style: .active,
                imageType: .local(image: Image("ChallengeCardPlaceholder"),
                progressTrack: OCProgressTrack(runningDays: "Still running for [X] days",
                                               date: "20-09-2023",
                                               progressBarTitle: "2 out of 4 progress",
                                               currentProgressValue: 2,
                                               totalProgressValue: 5)
            )
        }
        .padding(16)
    }
}