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