mirror of
https://github.com/vercel/commerce.git
synced 2025-07-21 11:51:20 +00:00
merge: merge m4-tan
This commit is contained in:
commit
be96b3a55a
@ -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
|
||||
|
148
pages/test.tsx
148
pages/test.tsx
@ -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 you’re 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 it’s cut up into bite size spoonable pieces.",
|
||||
"Some people aren’t 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 you’re 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 it’s cut up into bite size spoonable pieces.",
|
||||
"Some people aren’t 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 you’re 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 it’s cut up into bite size spoonable pieces.",
|
||||
"Some people aren’t 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 you’re 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 it’s cut up into bite size spoonable pieces.",
|
||||
"Some people aren’t 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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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
|
@ -1,3 +1,3 @@
|
||||
.content{
|
||||
.content {
|
||||
margin-top: 1.6rem;
|
||||
}
|
@ -1,4 +1,3 @@
|
||||
import classNames from 'classnames'
|
||||
import s from './CollapseContent.module.scss'
|
||||
|
||||
interface CollapseContentProps{
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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',
|
||||
|
Loading…
x
Reference in New Issue
Block a user