Merge pull request #282 from gregrickaby/feature/next-app-router-mant…

…ine-v7

Next app router mantine v7

.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['stylelint-config-standard']
+}

app/Page.module.css

@@ -0,0 +1,21 @@
+.container {
+  margin: 0 auto;
+  padding: 0 20px;
+  max-width: 1200px;
+
+  & > * {
+    margin-bottom: 20px;
+    margin-top: 20px;
+  }
+}
+
+.search {
+  align-items: center;
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.main {
+  min-height: 100vh;
+}

pages/api/places.ts → app/api/places/route.ts

@@ -1,8 +1,4 @@
-import type {NextRequest} from 'next/server'
-
-export const config = {
-  runtime: 'edge'
-}
+export const runtime = 'edge'
 
 export interface PredictionResponse {
   description: string
@@ -22,12 +18,12 @@ export interface Place {
  * @author Greg Rickaby
  * @see https://console.cloud.google.com/apis/credentials
  * @see https://developers.google.com/maps/documentation/places/web-service/autocomplete
- * @see https://nextjs.org/docs/api-routes/edge-api-routes
- * @see https://nextjs.org/docs/api-reference/edge-runtime
+ * @see https://nextjs.org/docs/app/building-your-application/routing/route-handlers
+ * @see https://nextjs.org/docs/pages/api-reference/edge
  */
-export default async function places(req: NextRequest) {
+export async function GET(request: Request) {
   // Get query params from request.
-  const {searchParams} = new URL(req.url)
+  const {searchParams} = new URL(request.url)
 
   // Parse params.
   const unsanitizedLocation = searchParams.get('location') || ''

pages/api/weather.ts → app/api/weather/route.ts

@@ -1,9 +1,6 @@
-import type {NextRequest} from 'next/server'
 import {WeatherResponse} from '~/lib/types'
 
-export const config = {
-  runtime: 'edge'
-}
+export const runtime = 'edge'
 
 export interface GeocodeResponse {
   status: string
@@ -29,12 +26,12 @@ export interface GeocodeResponse {
  * @see https://console.cloud.google.com/apis/credentials
  * @see https://developers.google.com/maps/documentation/geocoding/overview
  * @see https://openweathermap.org/api/one-call-api
- * @see https://nextjs.org/docs/api-routes/edge-api-routes
- * @see https://nextjs.org/docs/api-reference/edge-runtime
+ * @see https://nextjs.org/docs/app/building-your-application/routing/route-handlers
+ * @see https://nextjs.org/docs/pages/api-reference/edge
  */
-export default async function weather(req: NextRequest) {
+export async function GET(request: Request) {
   // Get query params from request.
-  const {searchParams} = new URL(req.url)
+  const {searchParams} = new URL(request.url)
 
   // Parse params.
   const unsanitizedLocation = searchParams.get('location') || ''

components/Alerts.tsx → app/components/Alerts.tsx

@@ -1,7 +1,9 @@
+'use client'
+
 import {Alert, Text, Title} from '@mantine/core'
 import {notifications} from '@mantine/notifications'
+import {IconAlertTriangle} from '@tabler/icons-react'
 import {useEffect} from 'react'
-import {FiTriangle} from 'react-icons/fi'
 import {useWeatherContext} from '~/components/WeatherProvider'
 
 /**
@@ -20,7 +22,7 @@ export default function Alerts() {
       notifications.show({
         autoClose: 5000,
         color: 'red',
-        icon: <FiTriangle />,
+        icon: <IconAlertTriangle />,
         message:
           'Hazardous weather conditions reported for this area. Scroll down for details.',
         title: 'Warning'
@@ -35,21 +37,18 @@ export default function Alerts() {
 
   return (
     <section>
-      <Title align="center" my="lg" order={2}>
+      <Title my="lg" order={2}>
         Alerts
       </Title>
       {alerts?.map((alert, index: number) => (
         <Alert
           color="red"
-          icon={<FiTriangle />}
+          icon={<IconAlertTriangle />}
           key={index}
           mb="xl"
-          sx={{textTransform: 'capitalize'}}
           title={alert?.event}
         >
-          <Text mb="md" sx={{textTransform: 'lowercase'}}>
-            {alert?.description}
-          </Text>
+          <Text mb="md">{alert?.description}</Text>
         </Alert>
       ))}
     </section>

app/components/BackToTop.module.css

@@ -0,0 +1,6 @@
+.backtotop {
+  bottom: 12px;
+  position: fixed;
+  right: 12px;
+  z-index: 100;
+}

app/components/BackTopTop.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import {Affix, Button, rem, Transition} from '@mantine/core'
+import {useWindowScroll} from '@mantine/hooks'
+import {IconArrowUp} from '@tabler/icons-react'
+import classes from '~/components/BackToTop.module.css'
+
+/**
+ * Back To Top component.
+ */
+export default function BackToTop() {
+  const [scroll, scrollTo] = useWindowScroll()
+
+  return (
+    <div className={classes.backtotop}>
+      <Affix position={{bottom: rem(20), right: rem(20)}}>
+        <Transition transition="slide-up" mounted={scroll.y > 0}>
+          {(transitionStyles) => (
+            <Button
+              aria-label="scroll to top"
+              leftSection={<IconArrowUp size="1rem" />}
+              style={transitionStyles}
+              onClick={() => scrollTo({y: 0})}
+            >
+              Scroll to top
+            </Button>
+          )}
+        </Transition>
+      </Affix>
+    </div>
+  )
+}

app/components/CurrentConditions.module.css

@@ -0,0 +1,24 @@
+.description {
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+.bigtemp {
+  font-size: 8rem;
+  font-weight: 700;
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+}
+
+.feelslike {
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+}

app/components/CurrentConditions.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import {Stack, Text} from '@mantine/core'
+import classes from '~/components/CurrentConditions.module.css'
+import {useWeatherContext} from '~/components/WeatherProvider'
+import {formatTemperature} from '~/lib/helpers'
+
+/**
+ * Current Conditions component.
+ */
+export default function CurrentConditions() {
+  const {
+    weather: {
+      current: {
+        weather: [{description}],
+        temp,
+        feels_like
+      }
+    },
+    tempUnit
+  } = useWeatherContext()
+
+  return (
+    <Stack align="center">
+      <Text
+        className={classes.description}
+        component="p"
+        gradient={{from: 'indigo', to: 'cyan', deg: 45}}
+        variant="gradient"
+      >
+        {description}
+      </Text>
+      <Text
+        className={classes.bigtemp}
+        component="p"
+        gradient={{from: 'indigo', to: 'cyan', deg: 45}}
+        variant="gradient"
+      >
+        {formatTemperature(tempUnit, temp)}
+      </Text>
+      {feels_like > temp && (
+        <Text
+          className={classes.feelslike}
+          component="p"
+          gradient={{from: 'yellow', to: 'orange', deg: 45}}
+          variant="gradient"
+        >
+          Feels Like: {formatTemperature(tempUnit, feels_like)}
+        </Text>
+      )}
+    </Stack>
+  )
+}

app/components/Footer.module.css

@@ -0,0 +1,19 @@
+.footer {
+  display: flex;
+  flex-direction: column;
+  font-family: monospace;
+  font-size: 0.875rem;
+  text-align: center;
+
+  p {
+    margin-bottom: 0;
+  }
+
+  a {
+    color: var(--mantine-color-anchor);
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

app/components/Footer.tsx

@@ -0,0 +1,33 @@
+import {IconBrandGithub} from '@tabler/icons-react'
+import classes from '~/components/Footer.module.css'
+import config from '~/lib/config'
+
+/**
+ * Footer component.
+ */
+export default function Footer() {
+  return (
+    <footer className={classes.footer}>
+      <p>
+        website by{' '}
+        <a
+          aria-label={`visit ${config.siteAuthor} website`}
+          href={config.authorUrl}
+          rel="author"
+        >
+          {config.siteAuthor}
+        </a>
+      </p>
+      <p>
+        <a
+          aria-label="view source code on github"
+          href={config.githubUrl}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <IconBrandGithub />
+        </a>
+      </p>
+    </footer>
+  )
+}

app/components/Forecast.module.css

@@ -0,0 +1,11 @@
+.title {
+  text-align: center;
+}
+
+.card {
+  text-align: center;
+
+  img {
+    margin: 0 auto;
+  }
+}