Add /team page

src/lib/api.ts

@@ -26,6 +26,7 @@ const createDir = (dir: string) => {
 createDir(assetsDir)
 createDir(notasImagesDir)
 createDir(workImagesDir)
+createDir(avatarImagesDir)
 
 export interface IFileWithData extends IFile {
   filename_disk: string
@@ -138,7 +139,7 @@ export interface ITeamMember {
   avatar: number
 }
 
-export interface ITeamMemberWithImage {
+export interface ITeamMemberWithImage extends ITeamMember {
   avatar_file: string
 }
 

src/pages/team.tsx

@@ -0,0 +1,70 @@
+import { Stack, Heading, Text, Box, Flex } from '@chakra-ui/react'
+
+import ResponsiveImage from '../components/ResponsiveImage'
+import SEO from '../components/SEO'
+
+import {
+  getAbout,
+  getTeamMembersWithImages,
+  IAbout,
+  ITeamMemberWithImage,
+  login,
+} from '../lib/api'
+
+const Team: React.FC<{
+  data: { about: IAbout; teamMembers: ITeamMemberWithImage[] }
+}> = ({ data }) => {
+  const { about, teamMembers } = data
+  return (
+    <>
+      <SEO title="work" />
+      <Box w={['100%', '100%', '1170px']} pt="2rem" px="1rem" mx="auto">
+        <Flex wrap="wrap">
+          <Box w="50%">
+            <Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
+              El team
+            </Heading>
+          </Box>
+          <Box w="50%" pt="6rem">
+            <Text fontWeight="300" lineHeight="1.9" pb="2rem">
+              {about.texto_team}
+            </Text>
+            <Stack wrap="wrap" direction="row" justify="space-between" mb="6rem">
+              {teamMembers.map((member) => (
+                <Box key={member.nombre} w="calc(50% - 2rem)" fontWeight="300">
+                  <Box>
+                    <ResponsiveImage
+                      url={`avatar/${member.avatar_file}`}
+                      alt={`Foto de ${member.nombre}`}
+                      w="100%"
+                      h="100%"
+                      borderRadius="primary"
+                      mb="1rem"
+                    />
+                  </Box>
+                  <Heading as="h3" fontSize="xl" mb="1rem">
+                    {member.nombre}
+                  </Heading>
+                  <Text fontSize="md">
+                    <i>“{member.cita}”</i>
+                  </Text>
+                </Box>
+              ))}
+            </Stack>
+          </Box>
+        </Flex>
+      </Box>
+    </>
+  )
+}
+
+export default Team
+
+export async function getStaticProps() {
+  await login()
+
+  const about = await getAbout()
+  const teamMembers = await getTeamMembersWithImages()
+
+  return { props: { data: { about: about.data, teamMembers } } }
+}