127 lines
3.4 KiB
TypeScript
127 lines
3.4 KiB
TypeScript
import React from 'react';
|
||
import { styles } from './styles';
|
||
|
||
interface WeatherData {
|
||
temp: number;
|
||
feelsLike: number;
|
||
condition: string;
|
||
icon: string;
|
||
wind: number;
|
||
humidity: number;
|
||
visibility: number;
|
||
forecast: Array<{
|
||
day: string;
|
||
icon: string;
|
||
temp: number;
|
||
}>;
|
||
}
|
||
|
||
const weatherDataByCity: WeatherData = {
|
||
temp: -2,
|
||
feelsLike: -5,
|
||
condition: 'Partly Cloudy',
|
||
icon: '⛅',
|
||
wind: 12,
|
||
humidity: 65,
|
||
visibility: 10,
|
||
forecast: [
|
||
{ day: 'TUE', icon: '🌤️', temp: -1 },
|
||
{ day: 'WED', icon: '☁️', temp: 0 },
|
||
{ day: 'THU', icon: '🌨️', temp: -3 },
|
||
{ day: 'FRI', icon: '❄️', temp: -4 },
|
||
{ day: 'SAT', icon: '⛅', temp: -2 }
|
||
]
|
||
};
|
||
|
||
|
||
export function WeatherDashboard() {
|
||
const data = weatherDataByCity;
|
||
const currentDate = new Date().toLocaleDateString('en-US', {
|
||
weekday: 'long',
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric'
|
||
});
|
||
|
||
const sendToChat = () => {
|
||
const message = `Current weather in Oslo:
|
||
Temperature: ${data.temp}°C (feels like ${data.feelsLike}°C)
|
||
Condition: ${data.condition}
|
||
Wind: ${data.wind} km/h
|
||
Humidity: ${data.humidity}%
|
||
Visibility: ${data.visibility} km
|
||
|
||
5-Day Forecast:
|
||
${data.forecast.map(day => `${day.day}: ${day.icon} ${day.temp}°C`).join('\n')}`;
|
||
|
||
sendPrompt(message);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<style>{styles}</style>
|
||
<div className="container">
|
||
<div className="card">
|
||
<div className="header">
|
||
<h1>
|
||
<span>{data.icon}</span>
|
||
<span>Oslo</span>
|
||
</h1>
|
||
<p className="location">{currentDate}</p>
|
||
</div>
|
||
|
||
<div className="current-weather">
|
||
<div className="temp">{data.temp}°C</div>
|
||
<div className="condition">{data.condition}</div>
|
||
<div className="feels-like">Feels like {data.feelsLike}°C</div>
|
||
</div>
|
||
|
||
<div className="stats-grid">
|
||
<div className="stat-item">
|
||
<div className="stat-icon">💨</div>
|
||
<div className="stat-label">Wind</div>
|
||
<div className="stat-value">{data.wind} km/h</div>
|
||
</div>
|
||
<div className="stat-item">
|
||
<div className="stat-icon">💧</div>
|
||
<div className="stat-label">Humidity</div>
|
||
<div className="stat-value">{data.humidity}%</div>
|
||
</div>
|
||
<div className="stat-item">
|
||
<div className="stat-icon">👁️</div>
|
||
<div className="stat-label">Visibility</div>
|
||
<div className="stat-value">{data.visibility} km</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card">
|
||
<div className="forecast">
|
||
<div className="forecast-title">5-Day Forecast</div>
|
||
<div className="forecast-grid">
|
||
{data.forecast.map((f, idx) => (
|
||
<div key={idx} className="forecast-item">
|
||
<div className="forecast-day">{f.day}</div>
|
||
<div className="forecast-icon">{f.icon}</div>
|
||
<div className="forecast-temp">{f.temp}°C</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="actions">
|
||
<button onClick={sendToChat}>
|
||
💬 Send to Chat
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function sendPrompt(message: string) {
|
||
throw new Error('Function not implemented.');
|
||
}
|
||
|