feat: add status page (httpcats#157)

amreih87 · Jun 3, 2023 · 5483e47 · 5483e47
1 parent 7750993
commit 5483e47
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 22 deletions.
diff --git a/app/status/[status]/page.tsx b/app/status/[status]/page.tsx
@@ -0,0 +1,32 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import statuses, { IStatus } from '@/lib/statuses';
+
+export const metadata = {};
+
+export default function Info({ params }: { params: { status: string } }) {
+  const statusObj = statuses[params.status as keyof typeof statuses] as IStatus;
+
+  return (
+    <main>
+      <Link href="/" className="text-white">{`< Back to home`}</Link>
+      <h1 className="text-center my-12">
+        {statusObj.code} {statusObj.message}
+      </h1>
+      <div className="text-center">
+        <Image
+          src={`/images/${statusObj.code.toString()}.jpg`}
+          alt={statusObj.message}
+          width={750}
+          height={600}
+          className="w-full h-full max-w-3xl"
+        />
+      </div>
+    </main>
+  );
+}
+
+export function generateStaticParams() {
+  return Object.keys(statuses).map((status) => ({ status }));
+}
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -1,12 +1,21 @@
+'use client';
+
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
 import FacebookButton from '@/components/FacebookButton';
 import GithubButton from '@/components/GithubButton';
 import TwitterButton from '@/components/TwitterButton';
+
 import styles from './Footer.module.css';
 
 import lang from '@/locales/en/common.json';
 
 const Footer = () => {
+  const pathname = usePathname();
+
+  const isMainPage = pathname === '/';
+
   return (
     <div className={styles.container}>
       <div className={styles.social}>
@@ -30,22 +39,24 @@ const Footer = () => {
         <a href="https://twitter.com/girlie_mac">@girlie_mac</a>)
       </p>
 
-      <p>
-        Check out <a href="https://www.abstractapi.com">Abstract API</a>, the
-        home for modern, developer-friendly tools like the{' '}
-        <a href="https://www.abstractapi.com/ip-geolocation-api">
-          IP Geolocation API
-        </a>
-        ,{' '}
-        <a href="https://www.abstractapi.com/vat-validation-rates-api">
-          VAT Validation & Rates API
-        </a>
-        ,{' '}
-        <a href="https://www.abstractapi.com/holidays-api">
-          Public Holiday API
-        </a>
-        , and more.
-      </p>
+      {isMainPage && (
+        <p>
+          Check out <a href="https://www.abstractapi.com">Abstract API</a>, the
+          home for modern, developer-friendly tools like the{' '}
+          <a href="https://www.abstractapi.com/ip-geolocation-api">
+            IP Geolocation API
+          </a>
+          ,{' '}
+          <a href="https://www.abstractapi.com/vat-validation-rates-api">
+            VAT Validation & Rates API
+          </a>
+          ,{' '}
+          <a href="https://www.abstractapi.com/holidays-api">
+            Public Holiday API
+          </a>
+          , and more.
+        </p>
+      )}
     </div>
   );
 };

diff --git a/components/Thumbnail/Thumbnail.tsx b/components/Thumbnail/Thumbnail.tsx
@@ -1,3 +1,5 @@
+import Link from 'next/link';
+
 import styles from './Thumbnail.module.css';
 
 type ThumbnailProps = {
@@ -7,7 +9,7 @@ type ThumbnailProps = {
 
 const Thumbnail = ({ code, description }: ThumbnailProps) => (
   <div className={styles.container}>
-    <a href={`/${code}`}>
+    <Link href={`/status/${code}`}>
       <div
         className={styles.image}
         style={{ backgroundImage: `url(/images/${code}.jpg)` }}
@@ -16,7 +18,7 @@ const Thumbnail = ({ code, description }: ThumbnailProps) => (
         <div className={styles.title}>{code}</div>
         <p>{description}</p>
       </div>
-    </a>
+    </Link>
   </div>
 );
 

diff --git a/lib/statuses.ts b/lib/statuses.ts
@@ -1,12 +1,12 @@
-interface Status {
+export interface IStatus {
   code: number,
   message: string
 }
-interface Statuses {
-  [key: string]: Status
+export interface IStatuses {
+  [key: string]: IStatus
 }
 
-const statuses:Statuses = {
+const statuses:IStatuses = {
   100: { code: 100, message: 'Continue' },
   101: { code: 101, message: 'Switching Protocols' },
   102: { code: 102, message: 'Processing' },

diff --git a/next.config.js b/next.config.js
@@ -5,6 +5,7 @@ const nextConfig = {
   output: 'export',
   experimental: { appDir: true },
   reactStrictMode: false,
+  images: { unoptimized: true },
 };
 
 module.exports = nextConfig;