crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-21 11:51:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: format code

Browse Source
This commit is contained in:
unknown 2021-09-07 12:20:06 +07:00
parent 2584e6c5d7
commit 510593d500
9 changed files with 35 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pages/index.tsx
View File

@ -11,7 +11,8 @@ 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.",
"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",
@ -19,7 +20,8 @@ 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.",
"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",
@ -27,7 +29,8 @@ 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.",
"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",
@ -35,7 +38,8 @@ 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.",
"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 Home() {

10
src/components/common/CardBlog/CardBlog.module.scss
View File

@ -1,10 +1,10 @@
@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;
@ -12,7 +12,7 @@
cursor: pointer;
}
}
.title{
.title {
padding: 1.6rem 0.8rem 0.4rem 0.8rem;
@apply font-bold;
font-size: 2rem;
@ -23,7 +23,7 @@
cursor: pointer;
}
}
.description{
.description {
padding: 0 0.8rem;
@apply overflow-hidden overflow-ellipsis ;
color: var(--text-label);

22
src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
View File

@ -1,18 +1,18 @@
@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;
}
.toggle{
.toggle {
&:before {
transform: rotate(180deg);
}
@ -21,21 +21,21 @@
}
}
}
&: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 +44,12 @@
width: 2.2rem;
transition: transform 500ms ease;
}
&:before{
&:before {
transform-origin: center;
transform: rotate(90deg);
}
}
}
.contentContainer{
.contentContainer {
@apply hidden pb-16;
}

8
src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
View File

@ -2,13 +2,15 @@ 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}: CollapseProps) => {
const CollapseChild = ({title, content, isToggle=false, link="/"}: CollapseProps) => {
const [isActive, changeActive] = useState(isToggle)
const handleToggle = () => {
@ -22,7 +24,9 @@ const CollapseChild = ({title, content, isToggle=false}: CollapseProps) => {
onClick = { handleToggle }
>
<div className={s.title}>
<a>{title}</a>
<Link href={link}>
<a>{title}</a>
</Link>
<div className={s.toggle}></div>
</div>
<div className={s.contentContainer}>

2
src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
View File

@ -1,3 +1,3 @@
.content{
.content {
margin-top: 1.6rem;
}

1
src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
View File

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

0
src/components/common/CollapseCommon/CollapseCommon.module.scss
View File

7
src/components/common/CollapseCommon/CollapseCommon.tsx
View File

@ -1,16 +1,15 @@
import s from './CollapseCommon.module.scss'
import CollapseChild from './CollapseChild/CollapseChild'
interface CollapseCommonProps{
data: {title: string, content: Array<string>}[],
data: {title: string, content: Array<string>, link: string}[],
}
const CollapseCommon = ({data}:CollapseCommonProps) => {
const CollapseCommon = ({data}: CollapseCommonProps) => {
return (
<section>
{
data.map(item =>
<CollapseChild key={item.title} title={item.title} content={item.content} />
<CollapseChild key={item.title} title={item.title} content={item.content} link={item.link} />
)
}
</section>

2
src/utils/constanst.utils.ts
View File

@ -9,7 +9,7 @@ export const ROUTE = {
HOME: '/',
PRODUCTS: '/products',
ABOUT: '/about',
BLOG_DETAIL: '/blogdetail',
BLOG_DETAIL: '/blog',
ACCOUNT: '/account',
BUSSINESS: '/bussiness',
CONTACT: '/contact',