commerce/components/common/Footer/Footer.tsx

import { FC } from 'react'
import cn from 'classnames'
import Link from 'next/link'
import { useRouter } from 'next/router'
import type { Page } from '@commerce/types/page'
import getSlug from '@lib/get-slug'
import { Github, Vercel } from '@components/icons'
import { Logo, Container } from '@components/ui'
import { I18nWidget } from '@components/common'
import s from './Footer.module.css'

interface Props {
  className?: string
  children?: any
  pages?: Page[]
}

const links = [
  {
    name: 'Home',
    url: '/',
  },
]

const Footer: FC<Props> = ({ className, pages }) => {
  const { sitePages } = usePages(pages)
  const rootClassName = cn(s.root, className)

  return (
    <footer className={rootClassName}>
      <Container>
        <svg className="mb-5" viewBox="0 0 345 65" fill="currentColor">
          <path
            d="M140.861 9.87835C138.143 7.93694 134.682 6.93769 130.448 6.93769C128.731 6.93769 127.043 7.10899 125.384 7.45159C123.725 7.79419 122.237 8.36519 120.95 9.1646C119.663 9.964 118.633 11.0489 117.861 12.3622C117.088 13.7041 116.716 15.3885 116.716 17.3585C116.716 19.2428 117.288 20.7845 118.376 21.9551C119.491 23.1256 120.979 24.0963 122.838 24.8101C124.698 25.5524 126.786 26.1805 129.132 26.6658C131.004 27.0532 132.894 27.4769 134.817 27.9079L134.824 27.9095C135.308 28.0181 135.795 28.1271 136.283 28.2361C138.715 28.8071 141.089 29.4638 143.435 30.2346C145.781 31.0055 147.869 32.0618 149.729 33.3751C151.588 34.6884 153.076 36.3443 154.191 38.3429C155.307 40.3414 155.851 42.8538 155.851 45.8801C155.851 49.1348 155.135 51.9327 153.677 54.2167C152.218 56.5293 150.329 58.4136 148.041 59.8697C145.752 61.3257 143.178 62.3821 140.374 63.0387C137.542 63.6954 134.71 64.0094 131.907 64.0094C128.474 64.0094 125.213 63.5812 122.18 62.7247C119.119 61.8682 116.43 60.5834 114.113 58.8419C111.796 57.1003 109.965 54.8734 108.621 52.1611C107.276 49.4489 106.589 46.2512 106.589 42.5112H114.313C114.313 45.0807 114.8 47.3076 115.801 49.1348C116.802 50.9906 118.118 52.5323 119.749 53.7028C121.379 54.9019 123.267 55.787 125.441 56.358C127.616 56.929 129.847 57.2145 132.135 57.2145C133.966 57.2145 135.797 57.0432 137.657 56.7006C139.516 56.358 141.175 55.787 142.691 54.959C144.179 54.1311 145.38 53.0176 146.296 51.5616C147.211 50.1341 147.669 48.3069 147.669 46.0799C147.669 43.9672 147.097 42.2542 146.01 40.9409C144.894 39.6276 143.407 38.5713 141.547 37.7433C139.688 36.9153 137.571 36.2587 135.254 35.7162C134.542 35.5603 133.825 35.4043 133.104 35.2476L133.104 35.2475L133.103 35.2475C131.449 34.8877 129.775 34.5238 128.102 34.146C125.67 33.6035 123.267 32.9754 120.95 32.2617C118.604 31.5479 116.487 30.6058 114.657 29.4352C112.797 28.2647 111.31 26.7515 110.194 24.8957C109.078 23.04 108.535 20.7274 108.535 17.9009C108.535 14.8175 109.164 12.1624 110.423 9.9069C111.682 7.65144 113.341 5.79568 115.429 4.33962C117.517 2.88357 119.892 1.79866 122.552 1.08491C125.213 0.371152 127.93 0 130.762 0C133.909 0 136.827 0.371152 139.516 1.11346C142.205 1.85576 144.551 3.02632 146.611 4.62512C148.642 6.22393 150.244 8.25099 151.417 10.6492C152.589 13.076 153.219 15.9881 153.362 19.357H145.638C145.18 15.0459 143.578 11.8483 140.861 9.87835ZM23.7724 6.93787C28.0062 6.93787 31.4676 7.93713 34.1853 9.87854C36.903 11.8485 38.505 15.0461 38.9913 19.4428H46.7152C46.5721 16.0739 45.9428 13.1618 44.7699 10.735C43.597 8.33683 41.995 6.30977 39.9639 4.71096C37.9042 3.11215 35.5584 1.94159 32.8694 1.19929C30.1803 0.456987 27.2624 0.0858347 24.1157 0.0858347C21.3122 0.0858347 18.5659 0.456987 15.9055 1.17074C13.2736 1.88449 10.8706 2.94085 8.83955 4.33981C6.72263 5.79587 5.06343 7.65163 3.80472 9.90709C2.54602 12.1625 1.91667 14.8177 1.91667 17.9011C1.91667 20.7276 2.4602 23.0402 3.57587 24.8959C4.69154 26.7517 6.1791 28.2648 8.03855 29.4354C9.89801 30.6059 12.0149 31.5481 14.3607 32.2619C16.6779 32.9756 19.0808 33.6037 21.5124 34.1462C23.1861 34.524 24.8598 34.888 26.5142 35.2477L26.5144 35.2478C27.2352 35.4045 27.9523 35.5605 28.6642 35.7164C31.0099 36.2589 33.1269 36.9155 34.9863 37.7435C36.8458 38.5714 38.3333 39.6278 39.449 40.9411C40.5647 42.2544 41.1082 43.9674 41.1082 46.0801C41.1082 48.307 40.6505 50.1343 39.7351 51.5618C38.8196 53.0178 37.6181 54.1313 36.1306 54.9592C34.643 55.7872 32.9838 56.3582 31.1244 56.7008C29.2363 57.0434 27.4055 57.2147 25.5746 57.2147C23.2861 57.2147 21.0547 56.9292 18.8806 56.3582C16.6779 55.7872 14.7898 54.9021 13.1592 53.703C11.5286 52.5325 10.2127 50.9908 9.21144 49.135C8.2102 47.3078 7.72388 45.0809 7.72388 42.5114H0C0 46.2514 0.65796 49.4491 2.00249 52.1613C3.34701 54.8736 5.17786 57.1005 7.49502 58.8421C9.81219 60.5836 12.5012 61.8684 15.5622 62.7249C18.6231 63.5814 21.8843 64.0096 25.3172 64.0096C28.092 64.0096 30.9241 63.6956 33.7562 63.0389C36.5883 62.3823 39.1629 61.3259 41.4515 59.8699C43.7114 58.4138 45.5995 56.5009 47.0584 54.2169C48.5174 51.9329 49.2326 49.135 49.2326 45.8803C49.2326 42.854 48.689 40.3416 47.5734 38.343C46.4577 36.3445 44.9701 34.6886 43.1107 33.3753C41.2226 32.062 39.1343 31.0057 36.7885 30.2348C34.4428 29.4639 32.0684 28.8073 29.6368 28.2363C29.1459 28.1268 28.6573 28.0172 28.1707 27.9082C26.2476 27.4771 24.3572 27.0534 22.4851 26.666C20.1107 26.1807 18.0224 25.5526 16.1629 24.8103C14.3035 24.0965 12.8159 23.1258 11.7002 21.9553C10.5846 20.7847 10.041 19.243 10.041 17.3587C10.041 15.3887 10.4129 13.7043 11.1853 12.3624C11.9577 11.0491 12.9876 9.96419 14.2749 9.16478C15.5622 8.36538 17.0497 7.79438 18.7089 7.45177C20.3682 7.10917 22.056 6.93787 23.7724 6.93787ZM99.8097 8.39374V1.54171H57.5V62.6961H100.067V55.8441H65.653V34.6884H97.4925V27.8364H65.653V8.39374H99.8097ZM215.239 62.6961L191.295 1.54171H182.284L158.426 62.6961H166.75L173.616 44.2813H199.534L206.228 62.6961H215.239ZM186.746 8.90764L196.959 37.4292H176.19L186.575 8.90764H186.746ZM232.917 1.54171L252.227 52.932L271.623 1.54171H282.779V62.6961H275.055V11.8198H274.884L255.746 62.6961H248.794L229.656 11.8198H229.485V62.6961H221.761V1.54171H232.917ZM313.418 62.6961H321.571V37.6862L345 1.54171H335.731L317.795 30.6629L299.429 1.54171H289.731L313.418 37.6862V62.6961Z"
          />
        </svg>
        <div className="space-x-4">
          {[...links, ...sitePages].map((page) => (
            <Link key={page.url} href={page.url!}>
              <a className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150">
                {page.name}
              </a>
            </Link>
          ))}
        </div>
      </Container>
    </footer>
  )
}

function usePages(pages?: Page[]) {
  const { locale } = useRouter()
  const sitePages: Page[] = []

  if (pages) {
    pages.forEach((page) => {
      const slug = page.url && getSlug(page.url)
      if (!slug) return
      if (locale && !slug.startsWith(`${locale}/`)) return
      sitePages.push(page)
    })
  }

  return {
    sitePages: sitePages.sort(bySortOrder),
  }
}

// Sort pages by the sort order assigned in the BC dashboard
function bySortOrder(a: Page, b: Page) {
  return (a.sort_order ?? 0) - (b.sort_order ?? 0)
}

export default Footer