|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- import type { NextPage } from 'next'
- import {GetServerSideProps} from 'next';
- import {Game} from '../../utils/games';
- import Link from 'next/link';
- import Head from 'next/head';
- import Image from 'next/image';
-
- type HomeProps = {
- games: Game[],
- }
-
- const GamesPage: NextPage<HomeProps> = ({
- games,
- }) => {
- return (
- <>
- <Head>
- <title>Flash Games</title>
- <style>{`
- body {
- background-color: #eee;
- }
-
- @media (min-width: 720px) {
- .games {
- grid-template-columns: 1fr 1fr;
- }
- }
-
- .foo {
- object-fit: cover;
- object-position: center;
- }
- `}</style>
- </Head>
- <div
- style={{
- width: '100%',
- maxWidth: 720,
- margin: '0 auto',
- padding: '0 2rem',
- boxSizing: 'border-box',
- }}
- >
- <ul
- className="games"
- style={{
- padding: 0,
- margin: '2rem 0',
- display: 'grid',
- gap: '2rem',
- gridGap: '2rem',
- }}
- >
- {
- games.map((g) => (
- <li
- key={g.id}
- style={{
- display: 'block',
- }}
- >
- <Link
- href={{
- pathname: '/games/[id]',
- query: {
- id: g.id,
- },
- }}
- passHref
- >
- <a
- href={`/games/${g.id}`}
- style={{
- display: 'block',
- height: '12rem',
- position: 'relative',
- overflow: 'hidden',
- borderRadius: '0.25rem',
- border: '1px solid #ddd',
- boxShadow: '0.125rem 0.25rem 0.25rem rgba(0,0,0,0.0625)'
- }}
- >
- <Image
- alt={g.name}
- src={`/games/${g.id}/${g.thumbnail}`}
- layout="fill"
- className="foo"
- />
- <div
- style={{
- position: 'absolute',
- bottom: 0,
- left: 0,
- width: '100%',
- textAlign: 'center',
- backgroundColor: 'white',
- padding: '0.5rem 0',
- boxSizing: 'border-box',
- }}
- >
- {g.name}
- </div>
- </a>
- </Link>
- </li>
- ))
- }
- </ul>
- </div>
- </>
- )
- }
-
- export const getServerSideProps: GetServerSideProps = async (ctx) => {
- const response = await fetch(`http://localhost:3000/api/games`);
- if (response.status !== 200) {
- return {
- notFound: true,
- }
- }
- const games = await response.json();
- return {
- props: {
- games,
- }
- }
- }
-
- export default GamesPage
|