cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Footer fixes

Browse Source
This commit is contained in:
paco 2020-10-08 14:17:06 -06:00
parent fd9ca3f6f9
commit a05c15b002
No known key found for this signature in database
GPG Key ID: CD243AF4E535B475
2 changed files with 43 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/core/Footer/Footer.module.css
View File

@ -1,7 +0,0 @@
.root {
@apply p-0 bg-black text-white;
}
.container {
@apply flex justify-between items-center flex-row px-4 py-5;
}

92
components/core/Footer/Footer.tsx
View File

@ -1,7 +1,7 @@
import cn from 'classnames' import cn from 'classnames'
import { FC } from 'react' import { FC } from 'react'
import s from './Footer.module.css' import { Logo } from '@components/ui'
import { Container, Logo } from '@components/ui' import Link from 'next/link'
interface Props { interface Props {
className?: string className?: string
@ -9,55 +9,49 @@ interface Props {
} }
const Footer: FC<Props> = ({ className }) => { const Footer: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(
'flex flex-col p-6 md:py-12 md:flex-row bg-black text-white flex-wrap',
className
)
return ( return (
<footer className={rootClassName}> <footer className={rootClassName}>
<Container className={s.container}> <Link href="/">
<div className="my-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2 py-6"> <a className="flex flex-initial items-center md:items-start font-bold md:mr-24">
<div className="md:grid md:grid-cols-2 md:gap-8"> <span className="rounded-full border border-gray-700 mr-2">
<div className=""> <Logo />
<div className="flex flex-row space-x-4 items-center"> </span>
<span className="rounded-full border border-gray-300"> <span>ACME</span>
<Logo /> </a>
</span> </Link>
<span>ACME</span>
</div> <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
</div> <li className="py-3 md:py-0 md:pb-4">
<div className="mt-12 md:mt-0"> <Link href="/about">
<ul className="space-y-4"> <a>About</a>
<li> </Link>
<a </li>
href="#"
className="text-base leading-6 text-gray-300 hover:text-white" <li className="py-3 md:py-0 md:pb-4">
> <Link href="/terms">
About <a>Terms of Use</a>
</a> </Link>
</li> </li>
<li>
<a <li className="py-3 md:py-0 md:pb-4">
href="#" <Link href="/privacy">
className="text-base leading-6 text-gray-300 hover:text-white" <a>Privacy Policy</a>
> </Link>
Terms of Use </li>
</a> </ul>
</li>
<li> <small className="text-base">
<a &copy; 2020 ACME, Inc. All rights reserved.
href="#" </small>
className="text-base leading-6 text-gray-300 hover:text-white"
> <hr
Privacy Policy className="hidden md:block mt-4 border-gray-700"
</a> style={{ flexBasis: '100%', height: 0 }}
</li> />
</ul>
</div>
</div>
<div className="flex justify-end mt-12 md:mt-0">
&copy; 2020 ACME, Inc. All rights reserved.
</div>
</div>
<hr className="text-base leading-6 text-gray-400 xl:text-center border-t border-gray-700" />
</Container>
</footer> </footer>
) )
} }