jsx import { graphql , useStaticQuery } from 'gatsby' ; import { Flex , Grid , Image , jsx , Link , LocalizedLink , Container , } from '@vtex/store-ui' ; import type { FC } from 'react' ; import type { FooterQueryQuery } from './__generated__/FooterQuery.graphql' ; const Footer = ( ) => { const { allStoreCollection : departments } = useStaticQuery < FooterQueryQuery > ( graphql `
      query FooterQuery {
        allStoreCollection(filter: { type: { eq: Department } }) {
          nodes {
            slug
            seo {
              title
            }
          }
        }
      }
    ` ) ; return ( < Container > < Flex variant = "footer" as = "footer" sx = { { flexDirection : 'column' } } > < Flex sx = { { flexDirection : [ 'column' , 'row' ] } } > < Grid gap = { 2 } columns = { [ 2 , 4 ] } my = { 3 } sx = { { flex : 1 } } > { departments . nodes . map ( ( item ) => ( < LocalizedLink key = { item . slug } to = { `/${ item . slug }` } > { item . seo . title . replace ( /[,\s].*/ , '' ) } < /LocalizedLink>))} < /Grid> < Flex > < Link href = "https://www.facebook.com/vtexonline/" target = "_blank" rel = "noreferrer" sx = { { height : '48px' , width : '48px' , alignItems : 'center' , justifyContent : 'center' , } } > < Image sx = { { height : 32 , width : 32 , mr : 1 } } height = "32px" width = "32px" loading = "lazy" alt = "Facebook" src = "https://storecomponents.vtexassets.com/_v/public/assets/v1/published/vtex.store-footer@2.20.1/public/react/ebd4bd10e66138168eb6a582e00790ea.svg" / > < /Link> < Link href = "https://www.instagram.com/vtextruecloud/" target = "_blank" rel = "noreferrer" sx = { { height : '48px' , width : '48px' , alignItems : 'center' , justifyContent : 'center' , } } > < Image sx = { { height : 32 , width : 32 , mr : 1 } } height = "32px" width = "32px" loading = "lazy" alt = "Instagram" src = "https://storecomponents.vtexassets.com/_v/public/assets/v1/published/vtex.store-footer@2.20.1/public/react/6a61a302319c062aceb9562a66381a63.svg" / > < /Link> < Link href = "https://twitter.com/vtexonline" target = "_blank" rel = "noreferrer" sx = { { height : '48px' , width : '48px' , alignItems : 'center' , justifyContent : 'center' , } } > < Image sx = { { height : 32 , width : 32 , mr : 1 } } height = "32px" width = "32px" loading = "lazy" alt = "Twitter" src = "https://storecomponents.vtexassets.com/_v/public/assets/v1/published/vtex.store-footer@2.20.1/public/react/5f12d2a63f43d3a243550ff6400b4870.svg" / > < /Link> < Link href = "https://www.youtube.com/user/VTEXTV" target = "_blank" rel = "noreferrer" sx = { { height : '48px' , width : '48px' , alignItems : 'center' , justifyContent : 'center' , } } > < Image sx = { { height : 32 , width : 32 } } height = "32px" width = "32px" loading = "lazy" alt = "Youtube" src = "https://storecomponents.vtexassets.com/_v/public/assets/v1/published/vtex.store-footer@2.20.1/public/react/20a214b4866fd6d42a6dfed070c0057b.svg" / > < /Link> < /Flex> < /Flex> < Flex > < Image sx = { { height : 32 , width : 32 } } height = "32px" width = "32px" loading = "lazy" alt = "Mastercard" src = "https://storecomponents.vtexassets.com/_v/public/assets/v1/published/vtex.store-footer@2.20.1/public/react/a8a977f569877c2df3a46c5a7b0d4dec.svg" / > < Image sx = { { height : 32 , width : 32 , mx : 1 } } height = "32px" width = "32px" loading = "lazy" alt = "Visa" src = "https://storecomponents.vtexassets.com/_v/public/assets/v1/published/vtex.store-footer@2.20.1/public/react/69f24958103909c9e64057b9956d886f.svg" / > < Image sx = { { height : 32 , width : 32 } } height = "32px" width = "32px" loading = "lazy" alt = "Credit Card" src = "https://storecomponents.vtexassets.com/_v/public/assets/v1/published/vtex.store-footer@2.20.1/public/react/d48ef71514c2996f778851c1df9cc5d0.svg" / > < /Flex> < Flex my = { 3 } > All stock and product photos are from photos . icons8 . com < /Flex> < /Flex> < /Container>); } ; export default Footer ;