yes

app/globals.css

@@ -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;
-  }
-}

app/page.tsx

@@ -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>
-      <h1>The weather in Sluseholmen for the next 3 days</h1>
-      <Weather location={location}/>
+      <div className='block mx-auto max-w-4xl'>
+        <LocationSearch />
+        <h1>The weather in Sluseholmen for the next 3 days</h1>
+        <WeatherNow location={location}/>
+      </div>
     </main>
   );
 }

components/LocationSearch.tsx

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

components/Weather.tsx

@@ -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>
-    );
-  }

components/WeatherNow.tsx

@@ -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>
+  );
+}