This commit is contained in:
parent
b7bcf5eddd
commit
ba5a9ff29c
|
@ -178,6 +178,12 @@ class Database {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async getNations(): Promise<any> {
|
||||||
|
const [ rows ] = await this.mysqlPool!.execute('SELECT * FROM nations');
|
||||||
|
|
||||||
|
return rows;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Database;
|
export default Database;
|
|
@ -18,6 +18,12 @@ const nextConfig = {
|
||||||
hostname: 'cdn.discordapp.com',
|
hostname: 'cdn.discordapp.com',
|
||||||
port: '',
|
port: '',
|
||||||
pathname: '/**',
|
pathname: '/**',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
protocol: 'https',
|
||||||
|
hostname: 'crss.fra1.cdn.digitaloceanspaces.com',
|
||||||
|
port: '',
|
||||||
|
pathname: '/**',
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
48
pages/nations.tsx
Normal file
48
pages/nations.tsx
Normal file
|
@ -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
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
98
styles/Nations.module.scss
Normal file
98
styles/Nations.module.scss
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue