SwiftUI.tsx

function LandmarkRow({ landmark }) {
    return (
        <HStack>
            <Image source={landmark.image} resizable />
            <Text>{landmark.name}</Text>
            <Spacer />
        </HStack>
    )
}

function LandmarkList({ landmarks }) {
    return (
        <List 
            data={landmarks} 
            ids={landmarks.map(l => l.id)} 
            navigationTitle="Landmarks"
        > { (landmark) =>
            <LandmarkRow landmark={landmark} />
        } </List>
    )
}

function MapView({ coordinate }) {
    const [region, setRegion] = useState(new MKCoordinateRegion())

    const onAppear = () => {
        setRegion(new MKCoordinateRegion({
            center: coordinate,
            span: new MKCoordinateSpan({ latitudeDelta: 0.2, longitudeDelta: 0.2 })
        }))
    }

    return (
        <Map 
            coordinateRegion={region} 
            setCoordinateRegion={setRegion} 
            onAppear={onAppear}
        />
    )
}

function LandmarkDetail({ landmark }) {
    return (
        <ScrollView navigationTitle={landmark.name} navigationBarTitleDisplayMode="inline">
            <VStack>
                <MapView 
                    coordinate={landmark.locationCoordinate} 
                    ignoresSafeArea={{ edges: "top" }} 
                    frame={{ height: 300 }} 
                />
                
                <CircleImage
                    image={landmark.image}
                    offset={{ y: -130 }} 
                    padding={{ edges: "bottom", value: -130 }} 
                />
                
                <VStack alignment="leading" padding>
                    <Text font="title" foregroundColor="primary">{landmark.name}</Text>
                    <HStack font="subheadline" foregroundColor="secondary">
                        <Text>{landmark.park}</Text>
                        <Spacer />
                        <Text>{landmark.state}</Text>
                    </HStack>

                    <Divider />

                    <Text font="title2">{`About ${landmark.name}`}</Text>
                    <Text>{landmark.description}</Text>
                </VStack>

                <Spacer />
            </VStack>
        </ScrollView>
    )
}