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

Fix footer width

Browse Source
This commit is contained in:
paco 2020-10-08 18:57:26 -06:00
parent 375e30ed8d
commit 3cc2120542
No known key found for this signature in database
GPG Key ID: CD243AF4E535B475
1 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,55 +10,57 @@ interface Props {
const Footer: FC<Props> = ({ className }) => { const Footer: FC<Props> = ({ className }) => {
const rootClassName = cn( const rootClassName = cn(
'flex flex-col p-6 md:py-12 md:flex-row bg-black text-white flex-wrap', 'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto',
className className
) )
return ( return (
<footer className={rootClassName}> <div className="bg-black text-white">
<Link href="/"> <footer className={rootClassName}>
<a className="flex flex-initial items-center md:items-start font-bold md:mr-24"> <Link href="/">
<span className="rounded-full border border-gray-700 mr-2"> <a className="flex flex-initial items-center md:items-start font-bold md:mr-24">
<Logo /> <span className="rounded-full border border-gray-700 mr-2">
</span> <Logo />
<span>ACME</span> </span>
</a> <span>ACME</span>
</Link> </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"> <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"> <li className="py-3 md:py-0 md:pb-4">
<Link href="/about"> <Link href="/about">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
About About
</a> </a>
</Link> </Link>
</li> </li>
<li className="py-3 md:py-0 md:pb-4"> <li className="py-3 md:py-0 md:pb-4">
<Link href="/terms"> <Link href="/terms">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
Terms of Use Terms of Use
</a> </a>
</Link> </Link>
</li> </li>
<li className="py-3 md:py-0 md:pb-4"> <li className="py-3 md:py-0 md:pb-4">
<Link href="/privacy"> <Link href="/privacy">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
Privacy Policy Privacy Policy
</a> </a>
</Link> </Link>
</li> </li>
</ul> </ul>
<small className="text-base"> <small className="text-base">
&copy; 2020 ACME, Inc. All rights reserved. &copy; 2020 ACME, Inc. All rights reserved.
</small> </small>
<hr <hr
className="hidden md:block mt-4 border-gray-700" className="hidden md:block mt-4 border-gray-700"
style={{ flexBasis: '100%', height: 0 }} style={{ flexBasis: '100%', height: 0 }}
/> />
</footer> </footer>
</div>
) )
} }