initial

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "semi": false
+}

actions/getAirPollutionData.ts

@@ -0,0 +1,16 @@
+export const getAirPollutionData = async ({
+  lat,
+  lon,
+}: {
+  lat: string
+  lon: string
+}) => {
+  const data = await fetch(
+    `http://localhost:3000/api/weather/air_pollution?lat=${lat}&lon=${lon}&appid=${process.env.NEXT_PUBLIC_OPEN_WEATHER_API_KEY}`,
+    {
+      next: { revalidate: 900 },
+    }
+  )
+
+  return data.json()
+}

actions/getHourlyData.ts

@@ -0,0 +1,16 @@
+export const getHourlyData = async ({
+  lat,
+  lon,
+}: {
+  lat: string
+  lon: string
+}) => {
+  const data = await fetch(
+    `http://localhost:3000/api/weather/hourly?lat=${lat}&lon=${lon}&appid=${process.env.NEXT_PUBLIC_OPEN_WEATHER_API_KEY}`,
+    {
+      next: { revalidate: 900 },
+    }
+  )
+
+  return data.json()
+}

actions/getTenDayForecast.ts

@@ -0,0 +1,16 @@
+export const getTenDayForecast = async ({
+  lat,
+  lon,
+}: {
+  lat: string
+  lon: string
+}) => {
+  const data = await fetch(
+    `http://localhost:3000/api/weather/daily_forecast?lat=${lat}&lon=${lon}&appid=${process.env.NEXT_PUBLIC_OPEN_WEATHER_API_KEY}`,
+    {
+      next: { revalidate: 900 },
+    }
+  )
+
+  return data.json()
+}

actions/getUVData.ts

@@ -0,0 +1,10 @@
+export const getUVData = async ({ lat, lon }: { lat: string; lon: string }) => {
+  const data = await fetch(
+    `http://localhost:3000/api/weather/uv_index?lat=${lat}&lon=${lon}`,
+    {
+      next: { revalidate: 900 },
+    }
+  )
+
+  return data.json()
+}

app/api/weather/air_pollution/route.ts

@@ -0,0 +1,31 @@
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const lat = searchParams.get("lat")
+  const lon = searchParams.get("lon")
+  const appid = searchParams.get("appid")
+
+  if (!appid) {
+    return Response.json(
+      { message: "OpenWeather API key not found in environment variables" },
+      { status: 401 }
+    )
+  }
+  if (!lat || !lon) {
+    return Response.json({ message: "Missing lat param" }, { status: 400 })
+  }
+
+  const res = await fetch(
+    `http://api.openweathermap.org/data/2.5/air_pollution?lat=${lat}&lon=${lon}&units=metric&appid=${appid}`,
+    {
+      next: { revalidate: 900 },
+    }
+  )
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch data")
+  }
+
+  const data = await res.json()
+
+  return Response.json(data)
+}

app/api/weather/daily_forecast/route.ts

@@ -0,0 +1,33 @@
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const lat = searchParams.get("lat")
+  const lon = searchParams.get("lon")
+  const appid = searchParams.get("appid")
+  const NUMBER_OF_DAYS = 10
+
+  if (!appid) {
+    return Response.json(
+      { message: "OpenWeather API key not found in environment variables" },
+      { status: 401 }
+    )
+  }
+
+  if (!lat || !lon) {
+    return Response.json({ message: "Missing lat param" }, { status: 400 })
+  }
+
+  const res = await fetch(
+    `http://api.openweathermap.org/data/2.5/forecast/daily?lat=${lat}&lon=${lon}&cnt=${NUMBER_OF_DAYS}&units=metric&appid=${appid}`,
+    {
+      next: { revalidate: 900 },
+    }
+  )
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch data")
+  }
+
+  const data = await res.json()
+
+  return Response.json(data)
+}

app/api/weather/hourly/route.ts

@@ -0,0 +1,32 @@
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const lat = searchParams.get("lat")
+  const lon = searchParams.get("lon")
+  const appid = searchParams.get("appid")
+  const HOURS = 23
+
+  if (!appid) {
+    return Response.json(
+      { message: "OpenWeather API key not found in environment variables" },
+      { status: 401 }
+    )
+  }
+  if (!lat || !lon) {
+    return Response.json({ message: "Missing parameters" }, { status: 400 })
+  }
+
+  const res = await fetch(
+    `https://pro.openweathermap.org/data/2.5/forecast/hourly?lat=${lat}&lon=${lon}&cnt=${HOURS}&units=metric&appid=${appid}`,
+    {
+      next: { revalidate: 900 },
+    }
+  )
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch data")
+  }
+
+  const data = await res.json()
+
+  return Response.json(data)
+}

app/api/weather/route.ts

@@ -0,0 +1,31 @@
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const lat = searchParams.get("lat")
+  const lon = searchParams.get("lon")
+  const appid = searchParams.get("appid")
+
+  if (!appid) {
+    return Response.json(
+      { message: "OpenWeather API key not found in environment variables" },
+      { status: 401 }
+    )
+  }
+  if (!lat || !lon) {
+    return Response.json({ message: "Missing parameters" }, { status: 400 })
+  }
+
+  const res = await fetch(
+    `https://pro.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&appid=${appid}`,
+    {
+      next: { revalidate: 900 },
+    }
+  )
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch data")
+  }
+
+  const data = await res.json()
+
+  return Response.json(data)
+}

app/api/weather/uv_index/route.ts

@@ -0,0 +1,24 @@
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const lat = searchParams.get("lat")
+  const lon = searchParams.get("lon")
+
+  if (!lat || !lon) {
+    return Response.json({ message: "Missing parameters" }, { status: 400 })
+  }
+
+  const res = await fetch(
+    `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&daily=uv_index_max,uv_index_clear_sky_max&timezone=auto&forecast_days=1`,
+    {
+      next: { revalidate: 900 },
+    }
+  )
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch data")
+  }
+
+  const data = await res.json()
+
+  return Response.json(data)
+}

app/globals.css

@@ -2,26 +2,89 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+html {
+  scrollbar-gutter: stable;
 }
 
-@media (prefers-color-scheme: dark) {
+body[style] {
+  height: 100%;
+  width: 100%;
+  margin: 0 auto !important;
+}
+
+@layer base {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
   }
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+canvas {
+  outline: none;
 }

app/layout.tsx

@@ -1,22 +1,44 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+import { Inter } from "next/font/google"
+import "./globals.css"
+import Script from "next/script"
+import { NextThemesProvider } from "@/components/providers/NextThemesProvider"
+import { CodeIcon, HeartIcon } from "@radix-ui/react-icons"
+import Navigation from "@/components/Navigation"
 
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+const inter = Inter({ subsets: ["latin"] })
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${inter.className}, container mx-auto flex min-h-screen flex-col antialiased selection:bg-black selection:text-white dark:bg-black dark:selection:bg-white dark:selection:text-black`}
+      >
+        <NextThemesProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Navigation />
+          <main className="flex-grow">{children}</main>
+          <footer className="group py-4">
+            <div className="flex items-center justify-center gap-1 text-neutral-400 dark:text-neutral-600">
+              <CodeIcon className="h-5 w-5" />
+              <span>with</span>
+              <HeartIcon className="h-4 w-4 group-hover:text-red-500" />
+              <span>in Denmark</span>
+            </div>
+          </footer>
+        </NextThemesProvider>
+        <Script
+          strategy={"beforeInteractive"}
+          src={`https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&libraries=places&callback=Function.prototype`}
+        />
+      </body>
     </html>
   )
 }