diff --git a/app/page.tsx b/app/page.tsx index 49c81e2..5ef58d9 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -4,6 +4,7 @@ import WeatherNow from '../components/WeatherNow' import { useState } from 'react'; import { defaultState } from './defaultState'; import { coordType } from '@/types/types'; +import WeatherIcon from '@/components/WeatherIcon'; const defaultGeoLocation: coordType = { lat: 55.647229603577124, @@ -19,9 +20,8 @@ export default function Home() {
-

The weather in {} for the next 3 days

+ -

{JSON.stringify(geoLocation)}

); diff --git a/components/LocationSearch.tsx b/components/LocationSearch.tsx index 67c9b8e..588a06e 100644 --- a/components/LocationSearch.tsx +++ b/components/LocationSearch.tsx @@ -6,14 +6,20 @@ import { useFormStatus } from "react-dom"; export default function LocationSearch(props: any) { const [searchLocation, setSearchLocation] = useState(""); const setGeoLocation = props.setGeoLocation; + const { pending } = useFormStatus(); const handleChange = (e: React.ChangeEvent) => { setSearchLocation(e.target.value); }; - const handleSubmit = (e: React.FormEvent) => { - const coordinates = getLocation(searchLocation); - setGeoLocation(coordinates); + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + try { + const coordinates = await getLocation(searchLocation); + setGeoLocation(coordinates); + } catch (error) { + console.error("Error fetching location:", error); + } }; - const { pending } = useFormStatus(); + return ( <>
@@ -32,7 +38,6 @@ export default function LocationSearch(props: any) { Enter location to get the weather!
-

{searchLocation}

); } diff --git a/components/WeatherIcon.tsx b/components/WeatherIcon.tsx new file mode 100644 index 0000000..2410d45 --- /dev/null +++ b/components/WeatherIcon.tsx @@ -0,0 +1,8 @@ +import Image from "next/image"; +import sunnyColor from '../public/sunny.svg' + +export default function WeatherIcon() { + return( + Weather icon +) +}; \ No newline at end of file diff --git a/components/WeatherNow.tsx b/components/WeatherNow.tsx index 9b7ba65..9248feb 100644 --- a/components/WeatherNow.tsx +++ b/components/WeatherNow.tsx @@ -22,7 +22,7 @@ export default function WeatherNow(props: { geoLocation: coordType }) { }, [props.geoLocation]); return ( <> -

Forecast

+

Here is the current weather in {weather.name}

diff --git a/public/clearNight.svg b/public/clearNight.svg new file mode 100644 index 0000000..b19b5c3 --- /dev/null +++ b/public/clearNight.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/clearNightColor.svg b/public/clearNightColor.svg new file mode 100644 index 0000000..3bacbac --- /dev/null +++ b/public/clearNightColor.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/cloudy.svg b/public/cloudy.svg new file mode 100644 index 0000000..6104995 --- /dev/null +++ b/public/cloudy.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/cloudyColor.svg b/public/cloudyColor.svg new file mode 100644 index 0000000..51bd3d5 --- /dev/null +++ b/public/cloudyColor.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/sunny.svg b/public/sunny.svg new file mode 100644 index 0000000..9b265aa --- /dev/null +++ b/public/sunny.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +