mirror of
https://github.com/vercel/commerce.git
synced 2025-07-21 11:51:20 +00:00
refactor: CollapseCommon
This commit is contained in:
unknown
parent
e21853ea4e
commit
2584e6c5d7
@ -4,10 +4,39 @@ import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeR
|
||||
import {SelectCommon} from 'src/components/common'
|
||||
import card from "../public/assets/images/card.png"
|
||||
|
||||
const 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.",
|
||||
const CONTENT_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.",
|
||||
]
|
||||
},
|
||||
{
|
||||
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.",
|
||||
]
|
||||
},
|
||||
{
|
||||
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.",
|
||||
]
|
||||
},
|
||||
{
|
||||
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.",
|
||||
]
|
||||
},
|
||||
]
|
||||
export default function Home() {
|
||||
return (
|
||||
@ -24,12 +53,7 @@ export default function Home() {
|
||||
{/* <HomeRecipe /> */}
|
||||
{/* <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
|
||||
<SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon> */}
|
||||
<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 title="This is a subtitle" content={CONTENT} />
|
||||
<CollapseCommon data={CONTENT_DATA} />
|
||||
<RelevantBlogPosts />
|
||||
{/* todo: uncomment */}
|
||||
{/* <ModalCreateUserInfo/> */}
|
||||
|
||||
@ -0,0 +1,55 @@
|
||||
@import "../../../../styles/utilities";
|
||||
|
||||
.collapseWrapper{
|
||||
@apply border-t border-b;
|
||||
border-color: var(--border-line);
|
||||
max-width: 80.4rem;
|
||||
min-height: 4rem;
|
||||
&.isActive{
|
||||
.title{
|
||||
@apply pb-0;
|
||||
}
|
||||
.contentContainer{
|
||||
@apply block;
|
||||
}
|
||||
.toggle{
|
||||
&:before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.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{
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
position: relative;
|
||||
&:before,
|
||||
&:after{
|
||||
@apply absolute h-2;
|
||||
content: "";
|
||||
border-radius: 0.8rem;
|
||||
background: var(--text-active);
|
||||
top: 40%;
|
||||
width: 2.2rem;
|
||||
transition: transform 500ms ease;
|
||||
}
|
||||
&:before{
|
||||
transform-origin: center;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentContainer{
|
||||
@apply hidden pb-16;
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
import s from './CollapseChild.module.scss'
|
||||
import { useState } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import CollapseContent from './CollapseContent/CollapseContent'
|
||||
|
||||
interface CollapseProps{
|
||||
title?: string,
|
||||
content: Array<string>,
|
||||
isToggle?: boolean,
|
||||
}
|
||||
const CollapseChild = ({title, content, isToggle=false}: 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 key={item} content={item} />)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CollapseChild
|
||||
@ -1,55 +0,0 @@
|
||||
@import "../../../styles/utilities";
|
||||
|
||||
.collapseWrapper{
|
||||
@apply border-t border-b;
|
||||
border-color: var(--border-line);
|
||||
max-width: 80.4rem;
|
||||
min-height: 4rem;
|
||||
&.isActive{
|
||||
.title{
|
||||
@apply pb-0;
|
||||
}
|
||||
.contentContainer{
|
||||
@apply block;
|
||||
}
|
||||
.toggle{
|
||||
&:before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
svg:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.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{
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
position: relative;
|
||||
&:before,
|
||||
&:after{
|
||||
@apply absolute h-2;
|
||||
content: "";
|
||||
border-radius: 0.8rem;
|
||||
background: var(--text-active);
|
||||
top: 40%;
|
||||
width: 2.2rem;
|
||||
transition: transform 500ms ease;
|
||||
}
|
||||
&:before{
|
||||
transform-origin: center;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentContainer{
|
||||
@apply hidden pb-16;
|
||||
}
|
||||
@ -1,37 +1,20 @@
|
||||
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>}[],
|
||||
}
|
||||
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} />
|
||||
)
|
||||
}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default CollapseCommon
|
||||
export default CollapseCommon
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user