index.js 2.29 KB
Newer Older
PLN committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
// pages/index.js
import Head from "next/head";
import React, { useState } from "react";
import { Box, Container, Text, Wrap, WrapItem } from "@chakra-ui/react";
import { getAllPhotos } from "../lib/utils";
import { Img } from "@chakra-ui/react";
import Link from "next/link";

export async function getStaticProps() {
  let data = await getAllPhotos();
  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  const [photos, setPhotos] = useState(data);
  // TODO: Fallback with random flowers? fallbackSrc
  return (
    <div>
      <Head>
        <title>Philippe Bureau - Galerie</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Box overflow="hidden" bg="gray.100" minH="100vh">
        <Container>
          <Text
PLN committed
30
            as="h1"
PLN committed
31 32
            color="gray.700"
            fontWeight="semibold"
PLN committed
33
            my="1rem"
PLN committed
34
            textAlign="center"
PLN committed
35
            fontSize={["md", "xl", "2xl", "2xl"]}
PLN committed
36 37 38 39
          >
            Philippe Bureau - Galerie Photo
          </Text>
        </Container>
PLN committed
40
        <Wrap px="1rem" spacing={"10px"} justify="center">
PLN committed
41 42 43
          {photos.map((photo) => (
            <WrapItem
              key={"wrap-" + photo.id}
PLN committed
44
              boxShadow="lg"
PLN committed
45
              overflow="hidden"
PLN committed
46 47
              m={1}
              rounded="10px"
PLN committed
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
              bg="white"
              lineHeight="0"
            >
              <a href={`/photos/${photo.id}`}>
                {/*<img
                  key={"img-" + path}
                  src={path}
                  height="200px"
                  width="80px"
                  color="gray.700"
                />*/}
                <Img
                  key={"img-" + photo.path}
                  src={photo.path}
                  height="240px"
                  width="240px"
                  objectFit="cover"
                  placeholder="img/Diaporama/f5b1d804-3860-4073-b280-69e54985c66f.jpg"
                  color="gray.700"
PLN committed
67 68 69 70 71 72 73
                  borderRadius="10px"
                  quality={25}
                  _hover={{
                    border: "solid 2px #DDD",
                    boxShadow: "dark-lg",
                    zIndex: "2",
                  }}
PLN committed
74 75 76 77 78 79 80 81 82
                />
              </a>
            </WrapItem>
          ))}
        </Wrap>
      </Box>
    </div>
  );
}