crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +00:00
Code Issues Packages Projects Releases Wiki 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 { FC } from 'react'
import s from './Footer.module.css'
import { Container, Logo } from '@components/ui'
import { Logo } from '@components/ui'
import Link from 'next/link'
interface Props {
className?: string
@ -9,55 +9,49 @@ interface Props {
}
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 (
<footer className={rootClassName}>
<Container className={s.container}>
<div className="my-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2 py-6">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div className="">
<div className="flex flex-row space-x-4 items-center">
<span className="rounded-full border border-gray-300">
<Logo />
</span>
<span>ACME</span>
</div>
</div>
<div className="mt-12 md:mt-0">
<ul className="space-y-4">
<li>
<a
href="#"
className="text-base leading-6 text-gray-300 hover:text-white"
>
About
</a>
</li>
<li>
<a
href="#"
className="text-base leading-6 text-gray-300 hover:text-white"
>
Terms of Use
</a>
</li>
<li>
<a
href="#"
className="text-base leading-6 text-gray-300 hover:text-white"
>
Privacy Policy
</a>
</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>
<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>About</a>
</Link>
</li>
<li className="py-3 md:py-0 md:pb-4">
<Link href="/terms">
<a>Terms of Use</a>
</Link>
</li>
<li className="py-3 md:py-0 md:pb-4">
<Link href="/privacy">
<a>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>
)
}