commerce/components/core/Footer/Footer.tsx

import cn from 'classnames'
import { FC } from 'react'
import { Logo } from '@components/ui'
import Link from 'next/link'

interface Props {
  className?: string
  children?: any
}

const Footer: FC<Props> = ({ className }) => {
  const rootClassName = cn(
    'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto',
    className
  )
  return (
    <div className="bg-black text-white">
      <footer className={rootClassName}>
        <Link href="/">
          <a className="flex flex-initial items-center md:items-start font-bold md:mr-24">
            <span className="rounded-full border border-gray-700 mr-2">
              <Logo />
            </span>
            <span>ACME</span>
          </a>
        </Link>

        <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
          <li className="py-3 md:py-0 md:pb-4">
            <Link href="/about">
              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
                About
              </a>
            </Link>
          </li>

          <li className="py-3 md:py-0 md:pb-4">
            <Link href="/terms">
              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
                Terms of Use
              </a>
            </Link>
          </li>

          <li className="py-3 md:py-0 md:pb-4">
            <Link href="/privacy">
              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
                Privacy Policy
              </a>
            </Link>
          </li>
        </ul>

        <small className="text-base">
          &copy; 2020 ACME, Inc. All rights reserved.
        </small>

        <hr
          className="hidden md:block mt-4 border-gray-700"
          style={{ flexBasis: '100%', height: 0 }}
        />
      </footer>
    </div>
  )
}

export default Footer