mirror of
https://github.com/vercel/commerce.git
synced 2025-07-29 05:01:22 +00:00
🎨 styles: footer
:%s
This commit is contained in:
lytrankieio123
23
src/components/common/Footer/Footer.module.scss
Normal file
23
src/components/common/Footer/Footer.module.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
@import "../../../styles/utilities";
|
||||
|
||||
.footer {
|
||||
@apply spacing-horizontal;
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 2rem;
|
||||
.footerMenu {
|
||||
padding-bottom: 8rem;
|
||||
}
|
||||
.menu {
|
||||
@apply flex flex-wrap;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
padding-bottom: 4rem;
|
||||
.footerMenu {
|
||||
@apply flex;
|
||||
.menu {
|
||||
@apply flex-nowrap justify-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
85
src/components/common/Footer/Footer.tsx
Normal file
85
src/components/common/Footer/Footer.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import React from 'react'
|
||||
import { ROUTE } from 'src/utils/constanst.utils'
|
||||
import FooterColumn from './components/FooterColumn/FooterColumn'
|
||||
import FooterSocial from './components/FooterSocial/FooterSocial'
|
||||
import s from './Footer.module.scss'
|
||||
|
||||
const FOOTER_COLUMNS = [
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{
|
||||
name: 'All Product',
|
||||
link: ROUTE.PRODUCTS,
|
||||
},
|
||||
{
|
||||
name: 'About Us',
|
||||
link: ROUTE.ABOUT,
|
||||
},
|
||||
{
|
||||
name: 'Bussiness',
|
||||
link: ROUTE.BUSSINESS,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Resources',
|
||||
items: [
|
||||
{
|
||||
name: 'Contact Us',
|
||||
link: ROUTE.CONTACT,
|
||||
},
|
||||
{
|
||||
name: 'FAQ',
|
||||
link: ROUTE.FAQ,
|
||||
},
|
||||
{
|
||||
name: 'Customer Service',
|
||||
link: ROUTE.CUSTOMER_SERVICE,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Quick Links',
|
||||
items: [
|
||||
{
|
||||
name: 'Terms & Conditions',
|
||||
link: ROUTE.TERM_CONDITION,
|
||||
},
|
||||
{
|
||||
name: 'Privacy Policy',
|
||||
link: ROUTE.TERM_CONDITION,
|
||||
},
|
||||
{
|
||||
name: 'Blog',
|
||||
link: ROUTE.TERM_CONDITION,
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
children?: any
|
||||
}
|
||||
|
||||
const Footer = ({ }: Props) => {
|
||||
return (
|
||||
<footer className={s.footer}>
|
||||
<div className={s.footerMenu}>
|
||||
<section className={s.menu}>
|
||||
{FOOTER_COLUMNS.map(item => <FooterColumn
|
||||
key={item.title}
|
||||
title={item.title}
|
||||
items={item.items} />)}
|
||||
</section>
|
||||
<FooterSocial />
|
||||
</div>
|
||||
<div>
|
||||
© 2021 Online Grocery
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@@ -0,0 +1,34 @@
|
||||
@import "../../../../../styles/utilities";
|
||||
|
||||
.footerColumn {
|
||||
width: 50%;
|
||||
margin-bottom: 4rem;
|
||||
@screen md {
|
||||
padding-right: 6.4rem;
|
||||
width: unset;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
padding-right: 12.8rem;
|
||||
}
|
||||
.title {
|
||||
@apply sm-headline text-active;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
@apply transition-all duration-200;
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
import s from './FooterColumn.module.scss'
|
||||
|
||||
interface Props {
|
||||
title: string,
|
||||
items: { link: string, name: string, isOpenNewTab?: boolean }[],
|
||||
}
|
||||
|
||||
const FooterColumn = ({ title, items }: Props) => {
|
||||
return (
|
||||
<section className={s.footerColumn}>
|
||||
<h4 className={s.title}>
|
||||
{title}
|
||||
</h4>
|
||||
<ul>
|
||||
{
|
||||
items.map(item => <li key={item.name}>
|
||||
{
|
||||
item.isOpenNewTab ?
|
||||
<a href={item.link} target="_blank" rel="noopener noreferrer">
|
||||
{item.name}
|
||||
</a>
|
||||
:
|
||||
<Link href={item.link}>
|
||||
<a >
|
||||
{item.name}
|
||||
</a>
|
||||
</Link>
|
||||
}
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterColumn;
|
||||
@@ -0,0 +1,43 @@
|
||||
@import "../../../../../styles/utilities";
|
||||
|
||||
.footerSocial {
|
||||
.title {
|
||||
@apply sm-headline text-active;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
.socialMedia,
|
||||
.payment {
|
||||
@apply list-none flex items-center;
|
||||
}
|
||||
.socialMedia {
|
||||
li {
|
||||
@apply transition-all duration-200;
|
||||
margin-right: 1.6rem;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
a {
|
||||
@apply no-underline;
|
||||
}
|
||||
&:hover {
|
||||
svg path {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.payment {
|
||||
margin-top: 3.2rem;
|
||||
li {
|
||||
margin-right: 1.6rem;
|
||||
width: 4rem;
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import IconFacebook from 'src/components/icons/IconFacebook';
|
||||
import IconInstagram from 'src/components/icons/IconInstagram';
|
||||
import IconTwitter from 'src/components/icons/IconTwitter';
|
||||
import IconYoutube from 'src/components/icons/IconYoutube';
|
||||
import { SOCIAL_LINKS } from 'src/utils/constanst.utils';
|
||||
import IconVisa from '../../../../../assets/imgs/visa.png';
|
||||
import IconMasterCard from '../../../../../assets/imgs/mastercard.png';
|
||||
import IconGooglePlay from '../../../../../assets/imgs/gpay.png';
|
||||
import IconApplePay from '../../../../../assets/imgs/apple_pay.png';
|
||||
import s from './FooterSocial.module.scss';
|
||||
|
||||
|
||||
|
||||
const SOCIAL_MENU = [
|
||||
{
|
||||
icon: <IconFacebook />,
|
||||
link: SOCIAL_LINKS.FB,
|
||||
},
|
||||
{
|
||||
icon: <IconTwitter />,
|
||||
link: SOCIAL_LINKS.TWITTER,
|
||||
},
|
||||
{
|
||||
icon: <IconYoutube />,
|
||||
link: SOCIAL_LINKS.YOUTUBE,
|
||||
},
|
||||
{
|
||||
icon: <IconInstagram />,
|
||||
link: SOCIAL_LINKS.IG,
|
||||
},
|
||||
]
|
||||
|
||||
const PAYMENT_METHODS = [
|
||||
{
|
||||
icon: IconVisa.src,
|
||||
name: 'Visa'
|
||||
},
|
||||
{
|
||||
icon: IconMasterCard.src,
|
||||
name: 'Master Card'
|
||||
},
|
||||
{
|
||||
icon: IconGooglePlay.src,
|
||||
name: 'GooglePay'
|
||||
},
|
||||
{
|
||||
icon: IconApplePay.src,
|
||||
name: 'Apple Pay'
|
||||
},
|
||||
]
|
||||
|
||||
const FooterSocial = () => {
|
||||
return (
|
||||
<section className={s.footerSocial}>
|
||||
<div className={s.title}>Social</div>
|
||||
<ul className={s.socialMedia}>
|
||||
{
|
||||
SOCIAL_MENU.map(item => <li key={item.link}>
|
||||
<a href={item.link} target="_blank" rel="noopener noreferrer">
|
||||
{item.icon}
|
||||
</a>
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
<ul className={s.payment}>
|
||||
{
|
||||
PAYMENT_METHODS.map(item => <li key={item.name}>
|
||||
<img src={item.icon} alt={item.name} />
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterSocial;
|
||||
8
src/components/common/Layout/Layout.module.scss
Normal file
8
src/components/common/Layout/Layout.module.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.mainLayout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
> main {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,9 @@
|
||||
import { FC, useRef, useEffect } from 'react'
|
||||
import Header from '../Header/Header'
|
||||
import { CommerceProvider } from '@framework'
|
||||
import { useRouter } from 'next/router'
|
||||
import { FC } from 'react'
|
||||
import Footer from '../Footer/Footer'
|
||||
import Header from '../Header/Header'
|
||||
import s from './Layout.module.scss'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
@@ -14,8 +16,11 @@ const Layout: FC<Props> = ({ children }) => {
|
||||
|
||||
return (
|
||||
<CommerceProvider locale={locale}>
|
||||
<Header />
|
||||
<main>{children}</main>
|
||||
<div className={s.mainLayout}>
|
||||
<Header />
|
||||
<main >{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</CommerceProvider>
|
||||
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user