mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
refactor: CollapseCommon
This commit is contained in:
@@ -4,10 +4,39 @@ import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeR
|
|||||||
import {SelectCommon} from 'src/components/common'
|
import {SelectCommon} from 'src/components/common'
|
||||||
import card from "../public/assets/images/card.png"
|
import card from "../public/assets/images/card.png"
|
||||||
|
|
||||||
const CONTENT = [
|
const CONTENT_DATA = [
|
||||||
"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.",
|
title: "This is a subtitle",
|
||||||
"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.",
|
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() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
@@ -24,12 +53,7 @@ export default function Home() {
|
|||||||
{/* <HomeRecipe /> */}
|
{/* <HomeRecipe /> */}
|
||||||
{/* <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
|
{/* <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
|
||||||
<SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon> */}
|
<SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon> */}
|
||||||
<CollapseCommon title="This is a subtitle" content={CONTENT} />
|
<CollapseCommon data={CONTENT_DATA} />
|
||||||
<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} />
|
|
||||||
<RelevantBlogPosts />
|
<RelevantBlogPosts />
|
||||||
{/* todo: uncomment */}
|
{/* todo: uncomment */}
|
||||||
{/* <ModalCreateUserInfo/> */}
|
{/* <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 s from './CollapseCommon.module.scss'
|
||||||
import { useState } from 'react'
|
import CollapseChild from './CollapseChild/CollapseChild'
|
||||||
import classNames from 'classnames'
|
|
||||||
import CollapseContent from './CollapseContent/CollapseContent'
|
|
||||||
|
|
||||||
interface CollapseProps{
|
interface CollapseCommonProps{
|
||||||
title?: string,
|
data: {title: string, content: Array<string>}[],
|
||||||
content: Array<string>,
|
|
||||||
isToggle?: boolean,
|
|
||||||
}
|
}
|
||||||
const CollapseCommon = ({title, content, isToggle}: CollapseProps) => {
|
|
||||||
const [isActive, changeActive] = useState(isToggle)
|
|
||||||
|
|
||||||
const handleToggle = () => {
|
const CollapseCommon = ({data}:CollapseCommonProps) => {
|
||||||
changeActive(!isActive)
|
return (
|
||||||
}
|
<section>
|
||||||
return(
|
{
|
||||||
<div className={classNames({
|
data.map(item =>
|
||||||
[s.collapseWrapper] : true,
|
<CollapseChild key={item.title} title={item.title} content={item.content} />
|
||||||
[s.isActive] : isActive
|
)
|
||||||
})}
|
}
|
||||||
onClick = { handleToggle }
|
</section>
|
||||||
>
|
|
||||||
<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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default CollapseCommon
|
export default CollapseCommon
|
||||||
|
Reference in New Issue
Block a user