Add /work page

src/lib/api.ts

@@ -57,9 +57,10 @@ export async function downloadFile(id: number, dir: string): Promise<string | nu
 }
 
 export async function extractUrlAndDownloadImage(element, imageKey: string, dir: string) {
-  const imageId = element.data[imageKey]
-  let imagenUrl = imageId ? await downloadFile(imageId, dir) : null
-  const returnValue = { ...element.data, [`${imageKey}_file`]: imagenUrl }
+  const data = element.data ? element.data : element
+  const imageId = await data[imageKey]
+  const imagenUrl = imageId ? await downloadFile(imageId, dir) : null
+  const returnValue = { ...data, [`${imageKey}_file`]: imagenUrl }
 
   return returnValue
 }
@@ -201,6 +202,12 @@ export async function getAllWorksWithBanners(): Promise<IWorkWithBanner[]> {
   return worksWithBanners
 }
 
+export async function getInicioWithImage(): Promise<IInicioWithImage> {
+  const inicio = await getInicio()
+  const inicioWithImage = await extractUrlAndDownloadImage(inicio, 'fondo', assetsDir)
+  return inicioWithImage
+}
+
 export async function getWorkWithImages(id: number): Promise<IWorkWithImages> {
   const work = await getWorkById(id)
   const workWithBanner = extractUrlAndDownloadImage(work, 'banner', workImagesDir)
@@ -223,10 +230,4 @@ export async function getTeamMembersWithImages(): Promise<ITeamMemberWithImage[]
   return teamWithAvatars
 }
 
-export async function getInicioWithImage(): Promise<IInicioWithImage> {
-  const inicio = await getInicio()
-  const inicioWithImage = await extractUrlAndDownloadImage(inicio, 'fondo', assetsDir)
-  return inicioWithImage
-}
-
 export default client

src/pages/work.tsx

@@ -0,0 +1,56 @@
+import { Stack, Heading, Text, Box, Flex, Link as ChakraLink } from '@chakra-ui/react'
+import Link from 'next/link'
+
+import ResponsiveImage from '../components/ResponsiveImage'
+import SEO from '../components/SEO'
+
+import { getAllWorksWithBanners, IWorkWithBanner, login } from '../lib/api'
+
+const Work: React.FC<{ data: IWorkWithBanner[] }> = ({ data }) => {
+  return (
+    <>
+      <SEO title="work" />
+      <Box w={['100%', '100%', '1170px']} pt="2rem" px="1rem" mx="auto">
+        <Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
+          Work y cositas
+        </Heading>
+        <Flex wrap="wrap">
+          {data.map((item, index) => (
+            <Link href={`/work/${item.slug}`} passHref key={item.slug}>
+              <ChakraLink w={index === 0 ? '100%' : '50%'} pb="4rem" px="1rem">
+                <Box>
+                  <ResponsiveImage
+                    url={`work/${item.banner_file}`}
+                    alt={`Imagen de ${item.titulo}`}
+                    w="100%"
+                    h="100%"
+                    borderRadius="primary"
+                    mb="1rem"
+                  />
+                  <Heading as="h3" fontSize="xl" pb="0.5rem">
+                    {item.titulo}
+                  </Heading>
+                  <Stack fontSize="md" spacing="1rem" direction="row">
+                    {item.tags.map((tag) => (
+                      <Text key={tag}>{tag}</Text>
+                    ))}
+                  </Stack>
+                </Box>
+              </ChakraLink>
+            </Link>
+          ))}
+        </Flex>
+      </Box>
+    </>
+  )
+}
+
+export default Work
+
+export async function getStaticProps() {
+  await login()
+
+  const worksWithBanners = await getAllWorksWithBanners()
+
+  return { props: { data: worksWithBanners } }
+}

src/theme.ts

@@ -6,6 +6,9 @@ const customTheme = extendTheme({
   colors: {
     blue,
   },
+  radii: {
+    primary: '64px 64px 64px 0px',
+  },
   fonts: {
     body: 'IBM Plex Sans, sans-serif',
     heading: 'IBM Plex Sans, sans-serif',