feat: nations list

lib/Database.ts

@@ -178,6 +178,12 @@ class Database {
       };
     });
   }
+
+  async getNations(): Promise<any> {
+    const [ rows ] = await this.mysqlPool!.execute('SELECT * FROM nations');
+
+    return rows;
+  }
 }
 
 export default Database;

next.config.js

@@ -18,6 +18,12 @@ const nextConfig = {
         hostname: 'cdn.discordapp.com',
         port: '',
         pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'crss.fra1.cdn.digitaloceanspaces.com',
+        port: '',
+        pathname: '/**',
       }
     ]
   },

pages/nations.tsx

@@ -0,0 +1,48 @@
+import Footer from '@/components/Footer';
+import Meta from '@/components/Meta';
+import NavBar from '@/components/NavBar';
+import PageContent from '@/components/PageContent';
+import Database from '@/lib/Database';
+
+import Link from 'next/link';
+import Image from 'next/image';
+
+import styles from '@/styles/Nations.module.scss';
+
+export default function Nations({ nations }: { nations: any[] }) {
+  return (
+    <>
+      <Meta page={{ title: 'Nations' }} />
+      <NavBar currentPage="nations" />
+
+      <PageContent>
+        <h1>Nations</h1>
+
+        <div className={styles.nationGrid}>
+          {nations.map((nation, i) => (
+            <Link key={i} href={`/nation/${nation.code}`} className={styles.nationCard}>
+              <h2>{nation.name}</h2>
+              <p>{nation.short_description}</p>
+
+              <Image src={`https://crss.fra1.cdn.digitaloceanspaces.com/nation/${nation.code}/flag.svg`} alt={nation.name} width={128} height={64} className={styles.icon} />
+            </Link>
+          ))}
+        </div>
+      </PageContent>
+
+      <Footer />
+    </>
+  );
+}
+
+export async function getServerSideProps(context: any) {
+  const db = new Database();
+
+  const nations = await db.getNations();
+
+  return {
+    props: {
+      nations
+    }
+  };
+}

styles/Nations.module.scss

@@ -0,0 +1,98 @@
+@import 'variables.module';
+@import 'global.module';
+
+.nationGrid {
+  display: grid;
+
+  grid-template-columns: repeat(3, minmax(200px, 1fr));
+
+  gap: 1rem;
+
+  > .nationCard {
+    position: relative;
+
+    display: flex;
+
+    flex-direction: column;
+
+    width: 100%;
+    height: 150px;
+
+    text-decoration: none;
+
+    padding: 1rem;
+
+    cursor: pointer;
+
+    overflow: hidden;
+
+    outline: 1px solid $colorBorderLight1;
+    border-radius: 1rem;
+
+    background: $colorSurfaceLight2;
+    color: $colorTextLight1;
+
+    transition: 0.24s;
+
+    > h2 {
+      margin: 0;
+      margin-bottom: .1rem;
+
+      font-size: 1.2em;
+      font-weight: 400;
+    }
+
+    > p {
+      margin: 0;
+    }
+
+    > .icon {
+      position: absolute;
+
+      top: 0;
+      right: 0;
+
+      height: 100%;
+
+      object-fit: cover;
+
+      mask-image: linear-gradient(to right, transparent, rgba(red, 0.3));
+
+      aspect-ratio: 1/1;
+
+      transition: 0.64s;
+
+      @media (prefers-color-scheme: dark) {
+        mask-image: linear-gradient(to right, transparent, rgba(red, 0.1));
+      }
+    }
+
+    &:hover {
+      outline-width: 2px;
+      outline-color: $colorPrimary;
+
+      transition: 0.08s;
+
+      > .icon {
+        transition: 0.48s;
+
+        transform: scale(1.2);
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: $colorBorderDark1;
+
+      background: $colorSurfaceDark2;
+      color: $colorTextDark1;
+    }
+  }
+
+  @media (max-width: 992px) {
+    grid-template-columns: repeat(2, minmax(200px, 1fr));
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}