TheoryOfNekomata
/
game-gallery


			
				
					
						
						
							
							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