bring over code challenge

pages/_app.tsx

@@ -0,0 +1,7 @@
+import 'tailwindcss/tailwind.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

pages/airports/[iata].tsx

@@ -0,0 +1,29 @@
+import { GetServerSideProps, NextPage } from 'next'
+
+import Layout from '../../components/layout'
+import { findAirportByIata } from '../../models/airport'
+import Airport from '../../types/airport'
+
+interface Props {
+  airport: Airport | undefined
+}
+
+const Page: NextPage<Props> = ({ airport }) => {
+  return <Layout>
+    <h1 className='text-2xl'>Airport: {airport.name}</h1>
+    <pre className='mt-10 text-gray-500 text-sm'>{JSON.stringify(airport, undefined, 2)}</pre>
+  </Layout>
+}
+
+export const getServerSideProps: GetServerSideProps = async ({ params }) => {
+  const { iata } = params
+  const airport = await findAirportByIata(iata.toString())
+
+  return {
+    props: {
+      airport,
+    }
+  }
+}
+
+export default Page

pages/api/airports.ts

@@ -0,0 +1,9 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+import { allAirports } from '../../models/airport'
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  const airports = await allAirports()
+
+  res.status(200).json(airports)
+}

pages/index.tsx

@@ -0,0 +1,30 @@
+import { NextPage } from 'next'
+
+import Layout from '../components/layout'
+import useApiData from '../hooks/use-api-data'
+import Airport from '../types/airport'
+
+const Page: NextPage = () => {
+  const airports = useApiData<Airport[]>('/api/airports', [])
+
+  return <Layout>
+    <h1 className='text-2xl'>Code Challenge: Airports</h1>
+
+    <h2 className="mt-10 text-xl">All Airports</h2>
+
+    <div>
+      {airports.map(airport => (
+        <a href={`/airports/${airport.iata.toLowerCase()}`} key={airport.iata} className='mt-5 flex items-center shadow p-5 border'>
+          <div>
+            {airport.name}, {airport.city}
+          </div>
+          <div className='ml-auto text-mono'>
+            {airport.country}
+          </div>
+        </a>
+      ))}
+    </div>
+  </Layout>
+}
+
+export default Page