You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.2 KiB
38 lines
1.2 KiB
import moment from "moment";
|
|
import './ForecastContent.css';
|
|
|
|
function ForecastContent(props) {
|
|
|
|
let image;
|
|
let header;
|
|
let summary;
|
|
let date;
|
|
let time;
|
|
if (props.forecast != null) {
|
|
const forecast = props.forecast
|
|
|
|
let url = `http://157.245.192.125:3001/images/${forecast.summary.replaceAll(' ', '_')}.png`
|
|
image = <img src={url} alt={forecast.summary} className="forecast-image"/>
|
|
let temperature = Math.round((forecast.temperature + Number.EPSILON) * 100) / 100
|
|
header = <p className="forecast-text">{temperature}℃</p>
|
|
summary = <p className="forecast-text">{forecast.summary}</p>
|
|
let formattedDate = moment(forecast.date).format("DD/MM")
|
|
date = <p className="forecast-text">{formattedDate}</p>
|
|
let formattedTime = moment(forecast.date).format("HH:mm")
|
|
time = <p className="forecast-text">{formattedTime}</p>
|
|
}
|
|
|
|
return (
|
|
<div className="w3-quarter">
|
|
{image}
|
|
<div className="weather-card-container">
|
|
{header}
|
|
{summary}
|
|
{date}
|
|
{time}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ForecastContent
|