Documentation Index
Fetch the complete documentation index at: https://mintlify.com/japsinghx/breeze-ios/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The PollutantsGrid component displays a detailed breakdown of individual air pollutants (PM2.5, PM10, NO2, SO2, O3, CO). Each pollutant is shown in a card-style row that users can tap to view comprehensive details in a modal sheet.
Visual Display
The grid presents:
- Apple-style grouped list of pollutant cards
- Color-coded icons for each pollutant type
- Current concentration values with units
- Status labels (Good, Moderate, Unhealthy)
- Tap gesture to open detailed information sheets
Component Definition
struct PollutantsGrid: View {
let pollutants: [PollutantReading]
@State private var selectedPollutant: PollutantReading?
@State private var detentSelection: PresentationDetent = .large
var body: some View {
VStack(alignment: .leading, spacing: 16) {
// Section Header
HStack {
Text("Air Quality Details")
.font(.title3)
.fontWeight(.semibold)
Spacer()
}
.padding(.horizontal, 4)
// Pollutant Cards - Apple-style list
VStack(spacing: 1) {
ForEach(Array(pollutants.enumerated()), id: \.element.id) { index, pollutant in
PollutantRow(pollutant: pollutant)
.onTapGesture {
selectedPollutant = pollutant
detentSelection = .large
}
.background(Color.cardBackground)
}
}
.clipShape(RoundedRectangle(cornerRadius: 12))
}
.sheet(item: $selectedPollutant) { pollutant in
PollutantDetailSheet(pollutant: pollutant)
.presentationDetents([.large, .medium], selection: $detentSelection)
.presentationDragIndicator(.visible)
}
}
}
Props / Parameters
pollutants
[PollutantReading]
required
Array of pollutant readings to display. Each PollutantReading contains:
type: Pollutant type (PM2.5, PM10, NO2, SO2, O3, CO)value: Current concentration valuestatus: Health status (Good, Moderate, Unhealthy)- Icon and unit information
Pollutant Row Component
Each row displays a single pollutant with:
struct PollutantRow: View {
let pollutant: PollutantReading
var body: some View {
HStack(spacing: 12) {
// Icon with colored background
ZStack {
RoundedRectangle(cornerRadius: 8)
.fill(pollutant.status.color.opacity(0.15))
.frame(width: 36, height: 36)
Image(systemName: pollutant.type.icon)
.font(.system(size: 16, weight: .medium))
.foregroundColor(pollutant.status.color)
}
// Name and description
VStack(alignment: .leading, spacing: 2) {
Text(pollutant.type.rawValue)
.font(.body)
.fontWeight(.medium)
Text(pollutant.type.fullName)
.font(.caption)
.foregroundColor(.secondary)
.lineLimit(1)
}
Spacer()
// Value and status
VStack(alignment: .trailing, spacing: 2) {
HStack(alignment: .firstTextBaseline, spacing: 2) {
Text("\(pollutant.roundedValue)")
.font(.body)
.fontWeight(.semibold)
Text(pollutant.type.unit)
.font(.caption2)
.foregroundColor(.secondary)
}
Text(pollutant.status.rawValue)
.font(.caption)
.fontWeight(.medium)
.foregroundColor(pollutant.status.color)
}
// Chevron
Image(systemName: "chevron.right")
.font(.caption)
.fontWeight(.semibold)
.foregroundColor(Color(UIColor.tertiaryLabel))
}
.padding(.horizontal, 16)
.padding(.vertical, 12)
.contentShape(Rectangle())
}
}
Detail Sheet
Tapping a pollutant opens a comprehensive detail sheet featuring:
- Large circular icon with status color
- Current concentration with large typography
- Status badge
- “About” section explaining the pollutant
- Health ranges showing Good/Moderate/Unhealthy thresholds
struct PollutantDetailSheet: View {
let pollutant: PollutantReading
@Environment(\.dismiss) private var dismiss
var body: some View {
NavigationStack {
ScrollView {
VStack(spacing: 24) {
// Hero section
VStack(spacing: 16) {
// Icon
ZStack {
Circle()
.fill(pollutant.status.color.opacity(0.15))
.frame(width: 80, height: 80)
Image(systemName: pollutant.type.icon)
.font(.system(size: 32, weight: .medium))
.foregroundColor(pollutant.status.color)
}
}
// Current reading card
VStack(spacing: 12) {
HStack(alignment: .firstTextBaseline, spacing: 4) {
Text("\(pollutant.roundedValue)")
.font(.system(size: 56, weight: .bold, design: .rounded))
.foregroundColor(pollutant.status.color)
Text(pollutant.type.unit)
.font(.title3)
.foregroundColor(.secondary)
}
}
}
}
}
}
}
Pollutant Types
The component supports six major air pollutants:
- PM2.5 - Fine Particulate Matter (μg/m³)
- PM10 - Coarse Particulate Matter (μg/m³)
- NO2 - Nitrogen Dioxide (μg/m³)
- SO2 - Sulfur Dioxide (μg/m³)
- O3 - Ozone (μg/m³)
- CO - Carbon Monoxide (μg/m³)
Each has unique icons, health thresholds, and descriptions.
Health Range Display
The detail sheet includes a RangeRow component showing health thresholds:
struct RangeRow: View {
let label: String
let range: String
let color: Color
let isActive: Bool
var body: some View {
HStack {
HStack(spacing: 10) {
Circle()
.fill(color)
.frame(width: 12, height: 12)
Text(label)
.font(.subheadline)
.fontWeight(isActive ? .semibold : .regular)
}
Spacer()
Text(range)
.font(.subheadline)
.foregroundColor(.secondary)
}
.padding(.vertical, 10)
.padding(.horizontal, 12)
.background(isActive ? color.opacity(0.1) : Color.clear)
.clipShape(RoundedRectangle(cornerRadius: 10))
}
}
Usage in App
PollutantsGrid(pollutants: [
PollutantReading(type: .pm25, value: 15),
PollutantReading(type: .pm10, value: 30),
PollutantReading(type: .no2, value: 45),
PollutantReading(type: .so2, value: 20),
PollutantReading(type: .o3, value: 55),
PollutantReading(type: .co, value: 3000)
])
Source Location
BreezeApp/Views/Dashboard/PollutantsGrid.swift:3
