Travel Blog Website using React

//App.js

import Header from './components/Header.js'
import Cards from './components/Cards.js'
import { data } from './data.js'
import Footer from './components/Footer.js'
import './App.css'

function App() {
	const mappedData = data.map((item) => {
		return (
			<Cards key={item.id} item={item} />
		)
	})
	return (
		<div className="App">
			<Header />
			{mappedData}
			<Footer />
		</div>
	);
}

export default App;

//Cards.js

import React from 'react';


export default function Cards(props) {
	return (
		<div className='card'>
			<section className='column-left'>
				<img className="card-img" src="./images/coverImg" alt="images" />
			</section>
			<section className='column-right'>
				<span className='material-symbols-outlined'>location_on</span>
				<span className="card-country">{props.item.country} </span>
				<a href={props.item.googleMapLink}>View on Google Maps</a>
				<h3 className="card-country-title">{props.item.title}</h3>
				<h4 className="card-date">{props.item.date}</h4>
				<p>{props.item.description}</p>
				<span>Read more..</span>
			</section>

		</div>
	)
}

//Header.js

import React from "react";

export default function Header() {
	return (
		<div>
			<header className="journal-header">
				<h1 className="title">my travel journal</h1>
			</header>
		</div>
	)
}

//Footer.js

import React from 'react';

export default function Footer() {
	return (
		<div className='journal-footer'>
			<caption>Ingrid G. 2023 |</caption>
			<caption className='footer-caption'> Favicon by: </caption>
		</div>
	)
};

//data.js

export const data = [
	{
		id: 1,
		date: "May 2018",
		title: "Panajachel, Lake Atitlán",
		description: 
"The busiest and most built-up lakeside town, Panajachel ('Pana') is the gateway to Lago de Atitlán for most travelers.",
		coverImg: "atitlan.jpeg",
		country: "GUATEMALA",
		googleMapLink: 
"https://www.google.com/maps/place/Lake+Atitl%C3%A1n/@14.6788007,-91.2837663,12z/data=!3m1!4b1!4m6!3m5!1s0x85894ac7c083b493:0xa6e33f7d6b54910!8m2!3d14.6906713!4d-91.2025207!16zL20vMDN3NXpy?entry=ttu",
	},
	{
		id: 2,
		date: "December 2019",
		title: "Secret Beach",
		description: 
"Experience the beautiful landscape and meet new friends all while enjoying pristine warm waves of the Atlantic.",
		coverImg: "belize.jpeg",
		country: "BELIZE",
		googleMapLink: 
"https://www.google.com/maps/search/belize+secret+beach/@18.0171292,-87.9672513,13z/data=!3m1!4b1?entry=ttu",
	}
]