Add /work page

master
Ian Mancini 4 years ago
parent 508c1f0f0d
commit 1f6f005922

@ -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

@ -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 } }
}

@ -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',

Loading…
Cancel
Save