merge: merge m4-tan

This commit is contained in:
unknown 2021-09-07 22:29:43 +07:00
commit be96b3a55a
12 changed files with 232 additions and 77 deletions

View File

@ -4,7 +4,7 @@ import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeR
export default function Home() {
return (
<>
<HomeBanner />
<HomeBanner/>
<HomeFeature />
<HomeCategories />
<HomeCollection />
@ -12,11 +12,8 @@ export default function Home() {
<HomeCTA />
<HomeRecipe />
<HomeSubscribe />
{/* // todo: uncomment */}
{/* <ModalCreateUserInfo/> */}
</>
)
}
// Home.Layout = Layout
Home.Layout = Layout

View File

@ -1,22 +1,146 @@
import { useState } from 'react'
import {
ButtonCommon,
Layout, ModalInfo
Layout,
ModalCommon,
ProductCarousel,
RelevantBlogPosts,
CollapseCommon,
} from 'src/components/common'
import { CollectionCarcousel } from 'src/components/modules/home'
import image5 from '../public/assets/images/image5.png'
import image6 from '../public/assets/images/image6.png'
import image7 from '../public/assets/images/image7.png'
import image8 from '../public/assets/images/image8.png'
const dataTest = [
{
name: 'Tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image5.src,
},
{
name: 'Cucumber',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image6.src,
},
{
name: 'Carrot',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image7.src,
},
{
name: 'Salad',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image8.src,
},
{
name: 'Tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image5.src,
},
{
name: 'Cucumber',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image6.src,
},
{
name: 'Tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image5.src,
},
{
name: 'Cucumber',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image6.src,
},
{
name: 'Carrot',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image7.src,
},
{
name: 'Salad',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image8.src,
},
{
name: 'Tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image5.src,
},
{
name: 'Cucumber',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image6.src,
},
]
const COLLAPSE_DATA = [
{
title: "This is a subtitle",
content: [
"When youre trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when its cut up into bite size spoonable pieces.",
"Some people arent into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
],
link: "/title"
},
{
title: "This is a subtitle",
content: [
"When youre trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when its cut up into bite size spoonable pieces.",
"Some people arent into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
],
link: "/title"
},
{
title: "This is a subtitle",
content: [
"When youre trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when its cut up into bite size spoonable pieces.",
"Some people arent into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
],
link: "/title"
},
{
title: "This is a subtitle",
content: [
"When youre trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when its cut up into bite size spoonable pieces.",
"Some people arent into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
],
link: "/title"
},
]
export default function Test() {
const [visible, setVisible] = useState(false)
const onClose = () => {
setVisible(false)
}
const onOpen = () => {
setVisible(true)
}
return (
<>
<ButtonCommon onClick={onOpen}>open</ButtonCommon>
<ModalInfo visible={visible} onClose={onClose}>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi?
</ModalInfo>
<CollapseCommon data={COLLAPSE_DATA} />
<RelevantBlogPosts />
</>
)
}

View File

@ -1,29 +1,29 @@
@import "../../../styles/utilities";
.cardBlogWarpper{
.cardBlogWarpper {
@apply inline-flex flex-col justify-start;
max-width: 39.2rem;
min-height: 34.4rem;
@apply inline-flex flex-col justify-start;
.image{
.image {
width: 100%;
max-height: 22rem;
border-radius: 2.4rem;
&:hover{
&:hover {
cursor: pointer;
}
}
.title{
.title {
padding: 1.6rem 0.8rem 0.4rem 0.8rem;
@apply font-bold;
font-size: 2rem;
line-height: 2.8rem;
letter-spacing: -0.01em;
color: var(--text-active);
&:hover{
&:hover {
cursor: pointer;
}
}
.description{
.description {
padding: 0 0.8rem;
@apply overflow-hidden overflow-ellipsis ;
color: var(--text-label);

View File

@ -1,18 +1,19 @@
@import "../../../styles/utilities";
@import "../../../../styles/utilities";
.collapseWrapper{
.collapseWrapper {
@apply border-t border-b;
border-color: var(--border-line);
max-width: 80.4rem;
min-height: 4rem;
&.isActive{
.title{
&.isActive {
.title {
@apply pb-0;
}
.contentContainer{
.contentContainer {
@apply block;
animation: ContentAnimationIn 0.5s ease-out;
}
.toggle{
.toggle {
&:before {
transform: rotate(180deg);
}
@ -21,21 +22,21 @@
}
}
}
svg:hover{
&:hover {
cursor: pointer;
}
}
.title{
.title {
@apply outline-none flex justify-between font-heading items-center pt-16 pb-16;
font-size: 3.2rem;
line-height: 4rem;
letter-spacing: -0.01em;
.toggle{
.toggle {
height: 2.2rem;
width: 2.2rem;
position: relative;
&:before,
&:after{
&:after {
@apply absolute h-2;
content: "";
border-radius: 0.8rem;
@ -44,12 +45,22 @@
width: 2.2rem;
transition: transform 500ms ease;
}
&:before{
&:before {
transform-origin: center;
transform: rotate(90deg);
}
}
}
.contentContainer{
.contentContainer {
@apply hidden pb-16;
}
@keyframes ContentAnimationIn {
0% {
opacity: 0;
transform: translateY(-1.6rem);
}
100% {
opacity: 1;
transform: none;
}
}

View File

@ -0,0 +1,41 @@
import s from './CollapseChild.module.scss'
import { useState } from 'react'
import classNames from 'classnames'
import CollapseContent from './CollapseContent/CollapseContent'
import Link from 'next/link'
interface CollapseProps{
title?: string,
content: Array<string>,
isToggle?: boolean,
link?: string,
}
const CollapseChild = ({title, content, isToggle=false, link="/"}: CollapseProps) => {
const [isActive, changeActive] = useState(isToggle)
const handleToggle = () => {
changeActive(!isActive)
}
return(
<div className={classNames({
[s.collapseWrapper] : true,
[s.isActive] : isActive
})}
onClick = { handleToggle }
>
<div className={s.title}>
<Link href={link}>
<a>{title}</a>
</Link>
<div className={s.toggle}></div>
</div>
<div className={s.contentContainer}>
{
content.map(item => <CollapseContent key={item} content={item} />)
}
</div>
</div>
)
}
export default CollapseChild

View File

@ -1,4 +1,3 @@
import classNames from 'classnames'
import s from './CollapseContent.module.scss'
interface CollapseContentProps{

View File

@ -1,37 +1,19 @@
import s from './CollapseCommon.module.scss'
import { useState } from 'react'
import classNames from 'classnames'
import CollapseContent from './CollapseContent/CollapseContent'
import CollapseChild from './CollapseChild/CollapseChild'
interface CollapseProps{
title?: string,
content: Array<string>,
isToggle?: boolean,
interface CollapseCommonProps{
data: {title: string, content: Array<string>, link: string}[],
}
const CollapseCommon = ({title, content, isToggle}: CollapseProps) => {
const [isActive, changeActive] = useState(isToggle)
const handleToggle = () => {
changeActive(!isActive)
}
return(
<div className={classNames({
[s.collapseWrapper] : true,
[s.isActive] : isActive
})}
onClick = { handleToggle }
>
<div className={s.title}>
<a>{title}</a>
<div className={s.toggle}></div>
</div>
<div className={s.contentContainer}>
{
content.map(item => <CollapseContent content={item} />)
}
</div>
</div>
const CollapseCommon = ({data}: CollapseCommonProps) => {
return (
<section>
{
data.map(item =>
<CollapseChild key={item.title} title={item.title} content={item.content} link={item.link} />
)
}
</section>
)
}
export default CollapseCommon
export default CollapseCommon

View File

@ -36,6 +36,9 @@ export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPos
export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
<<<<<<< HEAD
export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
export { default as CartDrawer} from './CartDrawer/CartDrawer'
export { default as BreadcrumbCommon} from './BreadcrumbCommon/BreadcrumbCommon'
export { default as BreadcrumbCommon} from './BreadcrumbCommon/BreadcrumbCommon'
=======
>>>>>>> 0f6cdc9f66ceaf2b0aec38d0d6444de902b69bfe

View File

@ -23,7 +23,10 @@ export { default as IconCheck } from './IconCheck'
export { default as IconTime } from './IconTime'
export { default as IconPeople } from './IconPeople'
export { default as IconLocation } from './IconLocation'
<<<<<<< HEAD
export { default as IconClose } from './IconClose'
export { default as IconDelete } from './IconDelete'
export { default as IconPlus } from './IconPlus'
export { default as IconMinus } from './IconMinus'
=======
>>>>>>> 0f6cdc9f66ceaf2b0aec38d0d6444de902b69bfe

View File

@ -31,11 +31,7 @@ const DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyC
content.map(item => <CollapseContent content={item} />)
}
</div>
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon title="This is a subtitle" content={CONTENT} />
<CollapseCommon data={CONTENT} />\
</div>
</section>

View File

@ -10,10 +10,9 @@ export const ROUTE = {
PRODUCTS: '/products',
PRODUCT_DETAIL: '/product',
ABOUT: '/about',
BLOG_DETAIL: '/blogdetail',
BLOG_DETAIL: '/blog',
ACCOUNT: '/account',
RECIPES: '/recipes',
BUSSINESS: '/bussiness',
CONTACT: '/contact',
FAQ: '/faq',