- 
)
diff --git a/src/components/common/CardBlog/CardBlog.module.scss b/src/components/common/CardBlog/CardBlog.module.scss
index 8f18e5753..f0dc00b3a 100644
--- a/src/components/common/CardBlog/CardBlog.module.scss
+++ b/src/components/common/CardBlog/CardBlog.module.scss
@@ -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);
diff --git a/src/components/common/CardBlog/CardBlog.tsx b/src/components/common/CardBlog/CardBlog.tsx
index 17a796bc4..314a6a1fd 100644
--- a/src/components/common/CardBlog/CardBlog.tsx
+++ b/src/components/common/CardBlog/CardBlog.tsx
@@ -1,21 +1,27 @@
import Link from 'next/link'
import React from 'react'
-import { RecipeProps } from 'src/utils/types.utils'
+import { ROUTE } from 'src/utils/constanst.utils'
+import { BlogProps } from 'src/utils/types.utils'
import s from './CardBlog.module.scss'
-export interface BlogCardProps extends RecipeProps {
- link: string,
+export interface BlogCardProps extends BlogProps {
+ // todo: edit when intergrate API
+
}
-const CardBlog = ({ imageSrc, title, description, link }: BlogCardProps) => {
+const CardBlog = ({ imageSrc, title, description, slug }: BlogCardProps) => {
return (
diff --git a/src/components/common/CollapseCommon/CollapseCommon.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
similarity index 68%
rename from src/components/common/CollapseCommon/CollapseCommon.module.scss
rename to src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
index 4686a886a..e6a71e44e 100644
--- a/src/components/common/CollapseCommon/CollapseCommon.module.scss
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
new file mode 100644
index 000000000..53cd70cf3
--- /dev/null
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
@@ -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{name}
+
+ )
+}
+
+export default CollapseChild
\ No newline at end of file
diff --git a/src/components/common/CollapseCommon/CollapseContent/CollapseContent.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
similarity index 66%
rename from src/components/common/CollapseCommon/CollapseContent/CollapseContent.module.scss
rename to src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
index 2d29c4b51..9e5cfba30 100644
--- a/src/components/common/CollapseCommon/CollapseContent/CollapseContent.module.scss
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
@@ -1,3 +1,3 @@
-.content{
+.content {
margin-top: 1.6rem;
}
\ No newline at end of file
diff --git a/src/components/common/CollapseCommon/CollapseContent/CollapseContent.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
similarity index 79%
rename from src/components/common/CollapseCommon/CollapseContent/CollapseContent.tsx
rename to src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
index 44a5624f3..e18e19c0a 100644
--- a/src/components/common/CollapseCommon/CollapseContent/CollapseContent.tsx
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames'
import s from './CollapseContent.module.scss'
interface CollapseContentProps{
diff --git a/src/components/common/CollapseCommon/CollapseCommon.tsx b/src/components/common/CollapseCommon/CollapseCommon.tsx
index 1fdce09da..e695a6576 100644
--- a/src/components/common/CollapseCommon/CollapseCommon.tsx
+++ b/src/components/common/CollapseCommon/CollapseCommon.tsx
@@ -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
+
+ {title}
+ +
+ {
+ content.map(item =>
+
-
+const CollapseCommon = ({data}: CollapseCommonProps) => {
+ return (
+
- {title}
-
-
-
- {
- content.map(item =>
-
- {/* {children}
li {
@apply block w-full transition-all duration-200 cursor-pointer text-active;
- word-wrap: break-word;
- -webkit-hyphens: auto;
- -ms-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
- overflow-x: hidden;
- position: relative;
- max-width: 15rem;
white-space: nowrap;
- text-overflow: ellipsis;
button {
all: unset;
color: currentColor;
diff --git a/src/components/common/MenuFilter/MenuFilter.module.scss b/src/components/common/MenuFilter/MenuFilter.module.scss
new file mode 100644
index 000000000..ecea2e119
--- /dev/null
+++ b/src/components/common/MenuFilter/MenuFilter.module.scss
@@ -0,0 +1,40 @@
+@import "../../../styles/utilities";
+.menuFilterWrapper{
+
+ @screen md {
+ @apply hidden;
+ }
+ .menuFilterHeading{
+ @apply sub-headline font-bold ;
+ color: var(--text-active);
+ font-feature-settings: 'salt' on;
+ margin: 0.8rem 0;
+ }
+ .menuFilterList{
+ @apply flex flex-wrap justify-start relative;
+ margin-bottom: 3rem;
+ box-sizing: border-box;
+ &::after{
+ @apply absolute;
+ top: 110%;
+ content: "";
+ width: 100%;
+ border-bottom: 1px solid var(--border-line);
+ }
+
+ li{
+ margin: 1rem 0;
+ padding:0;
+ div{
+ padding: 0.8rem 1.6rem;
+ margin-right: 0.8rem;
+ background-color: var(--gray);
+ border-radius: 0.8rem;
+ &.active {
+ color:white;
+ background-color: var(--primary);
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/common/MenuFilter/MenuFilter.tsx b/src/components/common/MenuFilter/MenuFilter.tsx
new file mode 100644
index 000000000..454942734
--- /dev/null
+++ b/src/components/common/MenuFilter/MenuFilter.tsx
@@ -0,0 +1,48 @@
+import classNames from 'classnames'
+import { useEffect, useState } from 'react';
+
+import s from './MenuFilter.module.scss'
+interface Props {
+ children?: any,
+ heading?:string,
+ categories:{name:string,link:string}[],
+ type:string,
+ onChangeValue?: (value: Object) => void
+}
+
+const MenuFilter = ({heading,categories,type,onChangeValue}:Props)=> {
+ const [active, setActive] = useState('');
+
+ function handleClick(link:string){
+ setActive(link);
+
+ if(active === link){
+ setActive('');
+ }
+ }
+
+ useEffect(()=>{
+
+ let href = active?.split("=");
+ const linkValue = href[1];
+
+ onChangeValue && onChangeValue({[type]:linkValue});
+ },[active])
+
+ return (
+
+
+ )
+}
+
+export default MenuFilter
diff --git a/src/components/common/MenuNavigation/MenuNavigation.module.scss b/src/components/common/MenuNavigation/MenuNavigation.module.scss
new file mode 100644
index 000000000..7535df707
--- /dev/null
+++ b/src/components/common/MenuNavigation/MenuNavigation.module.scss
@@ -0,0 +1,29 @@
+@import "../../../styles/utilities";
+.menuNavigationWrapper{
+ .menuNavigationHeading{
+ @screen md {
+ @apply sub-headline font-bold ;
+ color: var(--text-active);
+ font-feature-settings: 'salt' on;
+ margin: 1.6rem 0;
+ }
+ }
+ .menuNavigationList{
+ @screen md {
+ li{
+ margin: 0.8rem 0;
+ a{
+ display:block;
+ width:100%;
+ color:var(--text-base);
+ &:hover {
+ @apply text-primary;
+ }
+ &.active {
+ @apply text-primary;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/common/MenuNavigation/MenuNavigation.tsx b/src/components/common/MenuNavigation/MenuNavigation.tsx
new file mode 100644
index 000000000..4a8943051
--- /dev/null
+++ b/src/components/common/MenuNavigation/MenuNavigation.tsx
@@ -0,0 +1,34 @@
+import classNames from 'classnames'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import s from './MenuNavigation.module.scss'
+
+interface Props {
+ children?: any,
+ heading:string,
+ categories:{name:string,link:string}[]
+}
+
+const MenuNavigation = ({heading,categories}:Props)=> {
+ const router = useRouter()
+
+ return (
+
+
+ )
+}
+
+export default MenuNavigation
diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
new file mode 100644
index 000000000..aa3f5e6c3
--- /dev/null
+++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
@@ -0,0 +1,45 @@
+@import "../../../styles/utilities";
+.menuNavigationProductListDesktop{
+ @screen sm-only {
+ @apply hidden;
+ }
+}
+.menuNavigationProductListMobile{
+ @apply hidden;
+ &.isShow{
+ @apply block;
+ @screen md {
+ @apply hidden;
+ }
+ }
+ .menuNavigationProductModal{
+ background: rgba(0, 0, 0, 0.5);
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 10000;
+ .content{
+ @apply spacing-horizontal;
+ margin-top: 3rem;
+ padding-top: 2rem ;
+ padding-bottom: 5rem;
+ background-color: white;
+ overflow: auto;
+ height: 100%;
+ border-radius: 2.4rem 2.4rem 0 0;
+ .head{
+ @apply flex justify-between;
+ h3{
+ @apply heading-3 font-bold;
+ color:var(--text-base);
+ }
+ }
+ button{
+ margin-top: 2rem;
+ width: 100%;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
new file mode 100644
index 000000000..d9ac2aa26
--- /dev/null
+++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import {ButtonCommon} from 'src/components/common';
+import s from './MenuNavigationProductList.module.scss';
+import MenuSort from './MenuSort/MenuSort';
+import {LANGUAGE} from 'src/utils/language.utils';
+import classNames from 'classnames'
+import MenuFilter from '../MenuFilter/MenuFilter';
+import MenuNavigation from '../MenuNavigation/MenuNavigation';
+import IconHide from 'src/components/icons/IconHide';
+
+interface Props{
+ categories:{name:string,link:string}[],
+ brands:{name:string,link:string}[],
+ featured:{name:string,link:string}[],
+}
+
+const MenuNavigationProductList = ({categories,brands,featured}:Props)=>{
+
+ const [dataSort,setDataSort] = useState({});
+ const [isShow,setIsShow] = useState(true);
+
+ function handleValue(value:Object){
+ setDataSort({...dataSort,...value});
+ }
+ function filter(){
+ console.log(dataSort)
+ }
+
+ function hideMenu(){
+ if(isShow === true){
+ setIsShow(false);
+ }
+ }
+ return(
+ <>
+ ('');
+
+ function handleClick(link:string){
+ setActive(link);
+
+ if(active === link){
+ setActive('');
+ }
+ }
+
+ useEffect(()=>{
+
+ let href = active?.split("=");
+ const linkValue = href[1];
+
+ onChangeValue && onChangeValue({[type]:linkValue});
+ },[active])
+
+ return (
+
+
+ )
+}
+
+export default MenuSort
diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
index bedb993f4..b1059a441 100644
--- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
+++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
@@ -1,7 +1,6 @@
import Link from 'next/link'
import React, { useEffect, useRef } from 'react'
-import { ButtonCommon, Inputcommon } from 'src/components/common'
-import InputPassword from 'src/components/common/InputPassword/InputPassword'
+import { ButtonCommon, Inputcommon, InputPassword } from 'src/components/common'
import { ROUTE } from 'src/utils/constanst.utils'
import { CustomInputCommon } from 'src/utils/type.utils'
import s from '../FormAuthen.module.scss'
diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
index d03dbc39e..66ec1f8a4 100644
--- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
+++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react'
-import { ButtonCommon, Inputcommon } from 'src/components/common'
+import { ButtonCommon, Inputcommon, InputPassword } from 'src/components/common'
import s from '../FormAuthen.module.scss'
import styles from './FormRegister.module.scss'
import SocialAuthen from '../SocialAuthen/SocialAuthen'
diff --git a/src/components/common/PaginationCommon/PaginationCommon.tsx b/src/components/common/PaginationCommon/PaginationCommon.tsx
index d0df5efe7..aed2473f3 100644
--- a/src/components/common/PaginationCommon/PaginationCommon.tsx
+++ b/src/components/common/PaginationCommon/PaginationCommon.tsx
@@ -1,18 +1,19 @@
import classNames from 'classnames'
import React, { useEffect, useState } from 'react'
import { ArrowLeftSmall, ArrowRightSmall } from 'src/components/icons'
+import { DEFAULT_PAGE_SIZE } from 'src/utils/constanst.utils'
import PaginationItem from './components/PaginationItem'
import s from './PaginationCommon.module.scss'
interface PaginationCommonProps {
defaultCurrent?: number
- pageSize: number
+ pageSize?: number
total: number
onChange?: (page: number, pageSize: number) => void
}
const PaginationCommon = ({
total,
- pageSize,
+ pageSize=DEFAULT_PAGE_SIZE,
defaultCurrent,
onChange,
}: PaginationCommonProps) => {
@@ -54,14 +55,14 @@ const PaginationCommon = ({
{heading}
+-
+ {
+ categories.map(item =>
-
+ handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}> + {item.name} ++ )
+ }
+
{heading}({categories.length})
+-
+ {
+ categories.map(item =>
- + + + {item.name} + + + ) + } +
+
+
+
+
+ )
+}
+
+export default MenuNavigationProductList
\ No newline at end of file
diff --git a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
new file mode 100644
index 000000000..a25752901
--- /dev/null
+++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
@@ -0,0 +1,46 @@
+@import "../../../../styles/utilities";
+.menuSortWrapper{
+
+ @screen md {
+ @apply hidden;
+ }
+ .menuSortHeading{
+ @apply sub-headline font-bold ;
+ color: var(--text-active);
+ font-feature-settings: 'salt' on;
+ margin: 0.8rem 0;
+ }
+ .menuSortList{
+ box-sizing: border-box;
+ &::after{
+ @apply absolute;
+ top: 110%;
+ content: "";
+ width: 100%;
+ border-bottom: 1px solid var(--border-line);
+ }
+ li{
+ div{
+ height: 4.8rem;
+ line-height: 4.8rem;
+ padding: 0 1.6rem;
+ margin-right: 0.8rem;
+ border-radius: 0.8rem;
+ &.active {
+ @apply font-bold relative;
+ color:var(--text-active);
+ background-color: var(--primary-lightest);
+ &::after{
+ @apply absolute;
+ content:"";
+ background-image: url('/assets/svg/check.svg');
+ right: 1.6rem;
+ top: calc(50% - 24px/2);
+ width: 2.4rem;
+ height: 2.4rem;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx
new file mode 100644
index 000000000..2e66dfc83
--- /dev/null
+++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx
@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
+import s from './MenuSort.module.scss';
+
+interface Props {
+ children?: any,
+ heading:string,
+ type:string,
+ onChangeValue?: (value: Object) => void
+}
+const SORT = [
+ {
+ name: 'By Name',
+ link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=by-name`,
+ },
+ {
+ name: 'Price(High to Low)',
+ link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=high-to-low`,
+ },
+ {
+ name: 'Price (Low to High)',
+ link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=low-to-high`,
+ },
+ {
+ name: 'On Sale',
+ link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=on-sale`,
+ },
+ ];
+
+
+const MenuSort = ({heading,type,onChangeValue}:Props)=> {
+ const [active, setActive] = useState
+
+
+
+
+
+
+ {LANGUAGE.BUTTON_LABEL.CONFIRM}
+
+
+
+ FILTER
+{heading}
+-
+ {
+ SORT.map(item =>
-
+ handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}> + {item.name} ++ )
+ }
+
= pageNum - 1,
+ [s.disable]: currentPage >= pageNum - 1,
})}
onClick={onNextClick}
>
diff --git a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss
index d5a13299d..ed232830f 100644
--- a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss
+++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss
@@ -1,6 +1,9 @@
@import '../../../styles/utilities';
.blogPostWarpper {
+ &.cream{
+ background-color: #F5F4F2;
+ }
padding-top: 5.6rem;
padding-bottom: 5.2rem;
@apply flex flex-col;
diff --git a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
index 01e19bb25..1d71a6ca1 100644
--- a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
+++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
@@ -1,6 +1,7 @@
import image15 from '../../../../public/assets/images/image15.png'
import image16 from '../../../../public/assets/images/image16.png'
import image17 from '../../../../public/assets/images/image17.png'
+import classNames from 'classnames'
import React from 'react'
import { HeadingCommon, ViewAllItem } from 'src/components/common'
import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
@@ -9,54 +10,59 @@ import s from './RelevantBlogPosts.module.scss'
import { ROUTE } from 'src/utils/constanst.utils';
interface RelevantProps {
- data?: BlogCardProps[]
- itemKey?: string
- title?: string
- viewAllLink?: string
+ data?: BlogCardProps[],
+ itemKey?: string,
+ title?: string,
+ viewAllLink?: string,
+ bgcolor?: "default" | "cream"
}
const recipe:BlogCardProps[] = [
{
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
+ slug: 'have-a-nice-lunch',
description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
imageSrc: image15.src,
- link: `${ROUTE.BLOG_DETAIL}`
},{
title: "9 Ways to Make an Aloe Vera Mask at Home",
+ slug: 'have-a-nice-lunch',
description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
imageSrc: image16.src,
- link: `${ROUTE.BLOG_DETAIL}`
},{
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
+ slug: 'have-a-nice-lunch',
description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
imageSrc: image17.src,
- link: `${ROUTE.BLOG_DETAIL}`
},{
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
+ slug: 'have-a-nice-lunch',
description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
imageSrc: image15.src,
- link: `${ROUTE.BLOG_DETAIL}`
},{
title: "9 Ways to Make an Aloe Vera Mask at Home",
+ slug: 'have-a-nice-lunch',
description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
imageSrc: image16.src,
- link: `${ROUTE.BLOG_DETAIL}`
},{
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
+ slug: 'have-a-nice-lunch',
description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
imageSrc: image17.src,
- link: `${ROUTE.BLOG_DETAIL}`
}]
- const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts" }: RelevantProps) => {
+ const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {
return (
-
+
{title}
-
diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss
index d91b1831e..4809a46bb 100644
--- a/src/components/common/SelectCommon/SelectCommon.module.scss
+++ b/src/components/common/SelectCommon/SelectCommon.module.scss
@@ -1,69 +1,90 @@
@import "../../../styles/utilities";
-.select{
+.select {
background-color: var(--white);
- &.base{
+ .selectTrigger {
+ svg {
+ @apply transition-all duration-200;
+ }
+ }
+ &.base {
width: 20.6rem;
- .selectTrigger{
+ .selectTrigger {
width: 20.6rem;
padding: 1.2rem 1.6rem;
}
}
- &.large{
+ &.large {
width: 34.25rem;
- .selectTrigger{
+ .selectTrigger {
width: 34.25rem;
padding: 1.6rem 1.6rem;
}
}
- &.default{
- .selectTrigger{
+ &.default {
+ .selectTrigger {
@apply border-solid border border-current;
- }
+ }
}
- &.custom{
- .selectTrigger{
+ &.custom {
+ .selectTrigger {
@apply border-2;
border-color: var(--border-line);
color: var(--text-label);
}
}
- &.isActive{
- .selectOptionWrapper{
+ &:hover {
+ cursor: pointer;
+ .hoverWrapper {
@apply block;
+ animation: SelectAnimation 0.2s ease-out;
+ }
+ .selectTrigger {
+ svg {
+ transform: rotate(180deg);
+ }
}
}
}
-.selectTrigger{
+.selectTrigger {
@apply outline-none flex justify-between;
color: var(--text-active);
border-radius: 0.8rem;
-
}
-.selectOptionWrapper{
- @apply outline-none hidden z-10 absolute;
- border-radius: 0.8rem;
- background-color: var(--white);
- padding: 0.4rem 0rem 0.4rem 0rem;
- margin-top: 0.6rem;
- &.base{
- width: 20.6rem;
+.hoverWrapper {
+ @apply hidden outline-none absolute z-10;
+ padding-top: 0.6rem;
+ .selectOptionWrapper {
+ border-radius: 0.8rem;
+ background-color: var(--white);
+ padding: 0.4rem 0rem 0.4rem 0rem;
+ &.base {
+ width: 20.6rem;
+ }
+ &.large {
+ width: 34.25rem;
+ }
+ &.default {
+ @apply border-solid border border-current;
+ }
+ &.custom {
+ @apply border-2;
+ border-color: var(--border-line);
+ color: var(--text-label);
+ }
}
- &.large{
- width: 34.25rem;
- }
- &.default{
- @apply border-solid border border-current;
- }
- &.custom{
- @apply border-2;
- border-color: var(--border-line);
- color: var(--text-label);
- }
- &.active{
- @apply hidden;
+ &:hover {
+ @apply block;
}
}
-
-
+@keyframes SelectAnimation {
+ 0% {
+ opacity: 0;
+ transform: translateY(1.6rem);
+ }
+ 100% {
+ opacity: 1;
+ transform: none;
+ }
+}
diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx
index 5bb3d15d6..9b8c88e24 100644
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -1,43 +1,25 @@
import s from './SelectCommon.module.scss'
import classNames from 'classnames'
-import { useState, useRef, useEffect } from 'react'
+import { useState } from 'react'
import { IconVectorDown } from 'src/components/icons'
import SelectOption from './SelectOption/SelectOption'
interface Props {
- children? : React.ReactNode,
+ placeholder? : string,
size?: 'base' | 'large',
type?: 'default' | 'custom',
- option: {name: string}[],
+ option: {name: string, value: string}[],
+ onChange?: (value: string) => void,
}
-const SelectCommon = ({ type = 'default', size = 'base', option, children }: Props) => {
- const [isActive, setActive] = useState(false)
- const [selectedName, setSelectedName] = useState(children)
- const ref = useRef(null)
-
- useEffect(() => {
- const handleClick = (event: MouseEvent) => {
- const { target } = event;
- if (!ref?.current || ref?.current.contains(target as Node)) {
- return
- }
- else{
- setActive(false)
- }
- }
- document.addEventListener('click', handleClick)
- return () => {
- document.removeEventListener('click', handleClick)
- }
- }, [ref])
+const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange}: Props) => {
+ const [selectedName, setSelectedName] = useState(placeholder)
+ const [selectedValue, setSelectedValue] = useState('')
- const changeActiveStatus = () => {
- setActive(!isActive)
- }
-
- const changeSelectedName = (item:string) => {
+ const changeSelectedName = (item:string, value: string) => {
+ setSelectedValue(value)
setSelectedName(item)
+ onChange && onChange(value)
}
return(
<>
@@ -45,29 +27,29 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
[s.select] : true,
[s[size]] : !!size,
[s[type]] : !!type,
- [s.isActive] : isActive,
})}
- onClick = { changeActiveStatus }
- ref = {ref}
>
{selectedName}
-
-
- {
- option.map(item =>
-
)
diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
index 5448f9879..ef504c112 100644
--- a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
+++ b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
@@ -13,5 +13,9 @@
}
&:hover{
background-color: var(--gray);
+ color: var(--primary);
+ }
+ &.isChoose{
+ background-color: var(--gray);
}
}
\ No newline at end of file
diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.tsx b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
index 54877d5fe..7e1968f9e 100644
--- a/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
+++ b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
@@ -2,20 +2,22 @@ import s from './SelectOption.module.scss'
import classNames from 'classnames'
interface Props{
- onClick: (value: string) => void,
+ onClick: (name: string, value: string) => void,
itemName: string,
size: 'base' | 'large',
+ value: string,
+ selected?: boolean,
}
-const SelectOption = ({onClick, itemName, size}: Props) => {
-
+const SelectOption = ({onClick, itemName, size, value, selected} : Props) => {
const changeName = () => {
- onClick(itemName)
+ onClick(itemName, value)
}
return(
+
+
+ {
+ option.map(item =>
+
{itemName}
diff --git a/src/components/icons/IconArrowUp.tsx b/src/components/icons/IconArrowUp.tsx
index 3eac6391b..1f518d612 100644
--- a/src/components/icons/IconArrowUp.tsx
+++ b/src/components/icons/IconArrowUp.tsx
@@ -2,7 +2,7 @@ const ArrowUp = () => {
return (
)
}
diff --git a/src/components/icons/IconHide.tsx b/src/components/icons/IconHide.tsx
new file mode 100644
index 000000000..a977aff84
--- /dev/null
+++ b/src/components/icons/IconHide.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const IconHide = () => {
+ return (
+
+ )
+}
+
+export default IconHide
diff --git a/src/components/icons/IconVectorDown.tsx b/src/components/icons/IconVectorDown.tsx
index 019fc2806..0bb1cb8c1 100644
--- a/src/components/icons/IconVectorDown.tsx
+++ b/src/components/icons/IconVectorDown.tsx
@@ -1,5 +1,3 @@
-
-
const IconVectorDown = ({ ...props }) => {
return (