This commit is contained in:
ChrQR 2024-05-04 23:04:30 +02:00
parent c33c7568d1
commit 5d0ef2ec3a
6 changed files with 96 additions and 114 deletions

View File

@ -1,33 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}

View File

@ -1,4 +1,5 @@
import Weather from '../components/Weather'
import LocationSearch from '@/components/LocationSearch';
import WeatherNow from '../components/WeatherNow'
const location = {
latitude: '55.645519',
@ -8,8 +9,11 @@ const location = {
export default function Home() {
return (
<main>
<div className='block mx-auto max-w-4xl'>
<LocationSearch />
<h1>The weather in Sluseholmen for the next 3 days</h1>
<Weather location={location}/>
<WeatherNow location={location}/>
</div>
</main>
);
}

View File

@ -0,0 +1,7 @@
export default async function LocationSearch() {
return (
<h1>yes yes yes</h1>
);
}

View File

View File

@ -1,80 +0,0 @@
import { error } from "console";
interface Forecast {
coord: {
lon: number;
lat: number;
},
weather:
{
id: number,
main: string,
description: string,
icon: string;
}[]
,
base: string;
main: {
temp: number;
feels_like: number;
temp_min: number;
temp_max: number;
pressure: number;
humidity: number;
sea_level: number;
grnd_level: number;
},
visibility: number;
wind: {
speed: number;
deg: number;
gust: number;
},
rain: {
onehour: number
},
clouds: {
all: number
},
dt: number,
sys: {
type: number,
id: number,
country: string,
sunrise: number,
sunset: number;
},
timezone: number;
id: number;
name: string;
cod: number;
};
interface LocationType {
latitude: string;
longtitude: string;
}
const kelvin = 273.15;
async function getForecast(location: LocationType): Promise<Forecast> {
const {latitude, longtitude} = location;
const appId = '546911d860cb81f16585f7973b394b70';
const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longtitude}&appid=${appId}`)
if (!res.ok) {
throw new Error(`This is not great ${error}`);
}
return res.json();
}
export default async function Weather(props: {location: LocationType}) {
const location = props.location
const weather = await getForecast(location)
const temp = weather.main.temp - kelvin
return (
<main>
<h1>Forecast</h1>
<p>{temp}</p>
<p></p>
</main>
);
}

81
components/WeatherNow.tsx Normal file
View File

@ -0,0 +1,81 @@
import { error } from "console";
interface Forecast {
coord: {
lon: number;
lat: number;
};
weather: {
id: number;
main: string;
description: string;
icon: string;
}[];
base: string;
main: {
temp: number;
feels_like: number;
temp_min: number;
temp_max: number;
pressure: number;
humidity: number;
sea_level: number;
grnd_level: number;
};
visibility: number;
wind: {
speed: number;
deg: number;
gust: number;
};
rain: {
onehour: number;
};
clouds: {
all: number;
};
dt: number;
sys: {
type: number;
id: number;
country: string;
sunrise: number;
sunset: number;
};
timezone: number;
id: number;
name: string;
cod: number;
}
interface LocationType {
latitude: string;
longtitude: string;
}
async function getForecast(location: LocationType): Promise<Forecast> {
const { latitude, longtitude } = location;
const appId = "546911d860cb81f16585f7973b394b70";
const res = await fetch(
`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longtitude}&appid=${appId}`
);
if (!res.ok) {
throw new Error(`This is not great ${error}`);
}
return res.json();
}
export default async function WeatherNow(props: { location: LocationType }) {
const kelvin = 273.15;
const location = props.location;
const weather = await getForecast(location);
const temp = weather.main.temp - kelvin;
return (
<main>
<h1>Forecast</h1>
<p>{temp}</p>
<p></p>
</main>
);
}