Website/pages/nations.tsx
TheClashFruit ba5a9ff29c
All checks were successful
Lint Codebase / lint (push) Successful in 58s
feat: nations list
2024-08-29 23:46:56 +02:00

48 lines
1.2 KiB
TypeScript

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
}
};
}