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;
|
|
@ -18,6 +18,12 @@ const nextConfig = {
|
|||
hostname: 'cdn.discordapp.com',
|
||||
port: '',
|
||||
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