forked from crowetic/commerce
Fix footer width
This commit is contained in:
parent
375e30ed8d
commit
3cc2120542
@ -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">
|
||||||
© 2020 ACME, Inc. All rights reserved.
|
© 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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user