Fix build. Add titles to pages

src/components/Form.tsx

@@ -1,18 +1,18 @@
-import { useState, forwardRef } from 'react'
-import { useFormContext } from 'react-hook-form'
-import TextareaAutosize from 'react-textarea-autosize'
 import {
+  Box,
   Button,
   Flex,
-  Stack,
-  Box,
-  Text,
-  Input,
   FormControl,
   FormErrorMessage,
+  Input,
   InputProps,
+  Stack,
+  Text,
   Textarea,
 } from '@chakra-ui/react'
+import { forwardRef, useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+import TextareaAutosize from 'react-textarea-autosize'
 
 const CustomInput = forwardRef<HTMLInputElement, InputProps>(
   ({ name, ...props }, ref) => {
@@ -35,11 +35,11 @@ const CustomInput = forwardRef<HTMLInputElement, InputProps>(
 
 CustomInput.displayName = 'CustomInput'
 
-type FormFields = {
-  name: string
-  email: string
-  message: string
-}
+// type FormFields = {
+//   name: string
+//   email: string
+//   message: string
+// }
 
 const sendMessage = async () => {
   return new Promise((resolve) => {
@@ -99,7 +99,7 @@ const ContactForm: React.FC = () => {
             name="name"
             placeholder="Nombre"
             aria-label="Nombre"
-            disabled={isSubmitSuccessful}
+            isDisabled={isSubmitSuccessful}
             ref={register({ required: true })}
           />
           <FormErrorMessage>Este campo es obligatorio</FormErrorMessage>
@@ -110,7 +110,7 @@ const ContactForm: React.FC = () => {
             name="email"
             placeholder="e-mail"
             aria-label="e-mail"
-            disabled={isSubmitSuccessful}
+            isDisabled={isSubmitSuccessful}
             ref={register({
               required: true,
               pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/,
@@ -141,7 +141,7 @@ const ContactForm: React.FC = () => {
             borderColor="gray"
             focusBorderColor="primary"
             overflow="hidden"
-            disabled={isSubmitSuccessful}
+            isDisabled={isSubmitSuccessful}
             ref={register({ required: true })}
             _disabled={{ color: 'gray' }}
           />

src/components/MenuButton.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
 import { IconButton } from '@chakra-ui/react'
-import { MdMenu, MdClose } from 'react-icons/md'
+import React from 'react'
+import { MdClose, MdMenu } from 'react-icons/md'
 
 interface MenuButtonProps {
   isOpen?: boolean

src/components/Nav.tsx

@@ -1,9 +1,7 @@
-import React, { useEffect } from 'react'
+import { Box, Flex, Link as ChakraLink, Stack } from '@chakra-ui/react'
+import { motion } from 'framer-motion'
 import Link from 'next/link'
-import { AnimateSharedLayout, motion } from 'framer-motion'
 import { useRouter } from 'next/router'
-import { Link as ChakraLink, Flex, Box, Stack, HStack } from '@chakra-ui/react'
-import Headroom from 'react-headroom'
 
 import paths from '../paths'
 

src/components/NavBar.tsx

@@ -1,18 +1,18 @@
-import React, { useState, useEffect } from 'react'
-import Link from 'next/link'
 import {
-  Image,
-  Link as ChakraLink,
   Box,
   Flex,
+  Image,
+  Link as ChakraLink,
   Spacer,
   useBreakpointValue,
 } from '@chakra-ui/react'
 import { motion } from 'framer-motion'
+import Link from 'next/link'
+import React, { useEffect, useState } from 'react'
 import Headroom from 'react-headroom'
 
-import Nav from './Nav'
 import MenuButton from './MenuButton'
+import Nav from './Nav'
 
 export const closedNavHeight = '76px'
 

src/components/ResponsiveImage.tsx

@@ -1,4 +1,4 @@
-import { Image, Box, BoxProps, SystemStyleObject } from '@chakra-ui/react'
+import { Box, BoxProps, Image, SystemStyleObject } from '@chakra-ui/react'
 
 type ResponsiveImageProps = {
   url: string | null
@@ -41,6 +41,7 @@ const ResponsiveImage: React.FC<ResponsiveImageProps & BoxProps> = ({
 
   const src = responsiveImage.src.replaceAll('_next', '/_next')
   const srcSet = responsiveImage.srcSet.replaceAll('_next', '/_next')
+  const srcSetWebp = responsiveImageWebp.srcSet.replaceAll('_next', '/_next')
 
   return (
     <Box
@@ -57,7 +58,7 @@ const ResponsiveImage: React.FC<ResponsiveImageProps & BoxProps> = ({
     >
       {children}
       <picture>
-        <source srcSet={srcSet} type="image/webp" />
+        <source srcSet={srcSetWebp} type="image/webp" />
         <Image
           objectFit="cover"
           objectPosition="center"

src/lib/api.ts

@@ -144,7 +144,7 @@ export interface IInicio {
   fondo: number
 }
 
-export interface IInicioWithImage {
+export interface IInicioWithImage extends IInicio {
   fondo_file: string
 }
 

src/pages/_app.tsx

@@ -1,17 +1,15 @@
-import { Flex, ChakraProvider } from '@chakra-ui/react'
-import { FormProvider, useForm } from 'react-hook-form'
+import 'focus-visible/dist/focus-visible'
+import 'typeface-ibm-plex-sans'
 
+import { ChakraProvider, Flex } from '@chakra-ui/react'
 import { AppProps } from 'next/app'
+import Head from 'next/head'
 import { useRouter } from 'next/router'
 import NProgress from 'nprogress'
 import { useEffect } from 'react'
-import Head from 'next/head'
+import { FormProvider, useForm } from 'react-hook-form'
 
 import NavBar from '../components/NavBar'
-
-import 'focus-visible/dist/focus-visible'
-import 'typeface-ibm-plex-sans'
-
 import theme from '../theme'
 
 const App: React.FC<AppProps> = ({ Component, pageProps }) => {

src/pages/about.tsx

@@ -1,9 +1,7 @@
-import { Stack, Heading, Text, Box, Flex } from '@chakra-ui/react'
-
+import { Box, Flex, Heading, Text } from '@chakra-ui/react'
 import ReactMarkdown from 'react-markdown'
-import ResponsiveImage from '../components/ResponsiveImage'
-import SEO from '../components/SEO'
 
+import SEO from '../components/SEO'
 import {
   getAbout,
   getTeamMembersWithImages,
@@ -12,13 +10,13 @@ import {
   login,
 } from '../lib/api'
 
-const Team: React.FC<{
+const About: React.FC<{
   data: { about: IAbout; teamMembers: ITeamMemberWithImage[] }
 }> = ({ data }) => {
-  const { about, teamMembers } = data
+  const { about } = data
   return (
     <>
-      <SEO title="work" />
+      <SEO title="About" />
       <Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
         <Flex wrap="wrap">
           <Box w={['100%', '100%', '50%']} pr="3rem">
@@ -48,7 +46,7 @@ const Team: React.FC<{
   )
 }
 
-export default Team
+export default About
 
 export async function getStaticProps() {
   await login()

src/pages/contact.tsx

@@ -1,8 +1,8 @@
-import { Heading, Text, Box, Flex } from '@chakra-ui/react'
-
+import { Box, Flex, Heading, Text } from '@chakra-ui/react'
 import ReactMarkdown from 'react-markdown'
-import SEO from '../components/SEO'
+
 import Form from '../components/Form'
+import SEO from '../components/SEO'
 
 const Contact: React.FC = () => {
   return (

src/pages/index.tsx

@@ -1,11 +1,10 @@
-import { Text, Box } from '@chakra-ui/react'
+import { Box, Text } from '@chakra-ui/react'
 
 import ResponsiveImage from '../components/ResponsiveImage'
 import SEO from '../components/SEO'
+import { getInicioWithImage, IInicioWithImage, login } from '../lib/api'
 
-import { getInicioWithImage, login } from '../lib/api'
-
-const Home: React.FC = ({ fondo_file, mensaje_inspirador }) => {
+const Home: React.FC<IInicioWithImage> = ({ fondo_file, mensaje_inspirador }) => {
   return (
     <>
       <SEO />

src/pages/notas/[slug].tsx

@@ -1,8 +1,6 @@
-import { Spacer, Stack, Heading, Text, Box, Flex } from '@chakra-ui/react'
-
+import { Box, Heading, Stack, Text } from '@chakra-ui/react'
 import ResponsiveImage from 'components/ResponsiveImage'
 import SEO from 'components/SEO'
-
 import { getAllNotasWithImages, getNotaWithImage, INotaWithImage, login } from 'lib/api'
 import ReactMarkdown from 'react-markdown'
 
@@ -10,7 +8,7 @@ const NotePage: React.FC<{ data: INotaWithImage }> = ({ data }) => {
   console.log(data)
   return (
     <>
-      <SEO title="notas" />
+      <SEO title={`${data.titulo} | Notas`} />
       <Box w={['100%', '100%', '880px']} pt="2rem" px="1rem" mx="auto" pb="6rem">
         <Heading fontSize="2xl"> {data.titulo}</Heading>
         <Text as="small" fontSize="sm" pb="2rem">

src/pages/notas/index.tsx

@@ -1,15 +1,13 @@
-import { Link as ChakraLink, Stack, Heading, Text, Box, Flex } from '@chakra-ui/react'
-import Link from 'next/link'
-
+import { Box, Flex, Heading, Link as ChakraLink, Stack, Text } from '@chakra-ui/react'
 import ResponsiveImage from 'components/ResponsiveImage'
 import SEO from 'components/SEO'
-
-import { getAbout, getAllNotasWithImages, INotaWithImage, login } from 'lib/api'
+import { getAllNotasWithImages, INotaWithImage, login } from 'lib/api'
+import Link from 'next/link'
 
 const Notas: React.FC<{ notas: INotaWithImage[] }> = ({ notas }) => {
   return (
     <>
-      <SEO title="work" />
+      <SEO title="Notas" />
       <Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
         <Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
           Notas y pensamientos

src/pages/team.tsx

@@ -1,8 +1,7 @@
-import { Stack, Heading, Text, Box, Flex } from '@chakra-ui/react'
+import { Box, Flex, Heading, Stack, Text } from '@chakra-ui/react'
 
 import ResponsiveImage from '../components/ResponsiveImage'
 import SEO from '../components/SEO'
-
 import {
   getAbout,
   getTeamMembersWithImages,
@@ -17,7 +16,7 @@ const Team: React.FC<{
   const { about, teamMembers } = data
   return (
     <>
-      <SEO title="work" />
+      <SEO title="Team" />
       <Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
         <Flex wrap="wrap">
           <Box w={['100%', '100%', '50%']} pr="3rem">

src/pages/work/[slug].tsx

@@ -1,14 +1,12 @@
-import { Spacer, Stack, Heading, Text, Box, Flex } from '@chakra-ui/react'
-
+import { Box, Flex, Heading, Spacer, Stack, Text } from '@chakra-ui/react'
 import ResponsiveImage from 'components/ResponsiveImage'
 import SEO from 'components/SEO'
-
 import { getAllWorks, getWorkWithImages, IWorkWithImages, login } from 'lib/api'
 
 const WorkPage: React.FC<{ data: IWorkWithImages }> = ({ data }) => {
   return (
     <>
-      <SEO title="work" />
+      <SEO title={`${data.titulo} | Work`} />
       <ResponsiveImage
         url={`work/${data.banner_file}`}
         alt={`Imagen de ${data.titulo}`}

src/pages/work/index.tsx

@@ -1,15 +1,13 @@
-import { Stack, Heading, Text, Box, Flex, Link as ChakraLink } from '@chakra-ui/react'
-import Link from 'next/link'
-
+import { Box, Flex, Heading, Link as ChakraLink, Stack, Text } from '@chakra-ui/react'
 import ResponsiveImage from 'components/ResponsiveImage'
 import SEO from 'components/SEO'
-
 import { getAllWorksWithBanners, IWorkWithBanner, login } from 'lib/api'
+import Link from 'next/link'
 
 const Work: React.FC<{ data: IWorkWithBanner[] }> = ({ data }) => {
   return (
     <>
-      <SEO title="work" />
+      <SEO title="Work" />
       <Box w={['100%', '100%', '1170px']} pt="2rem" px="1rem" mx="auto">
         <Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
           Work y cositas