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

feat: create components BlogDetalImg BlogContent BlogDetailPage

Browse Source
This commit is contained in:
quangnhankie 2021-09-08 11:38:36 +07:00
commit ae5e7e8d43
11 changed files with 158 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pages/test.tsx
View File

@ -65,6 +65,7 @@ export default function Test() {
return (
<>
{/* <RecipeDetail /> */}
<BlogDetailPage />
{/* <RecipeListPage/> */}

81
src/components/common/SelectCommon/SelectCommon.module.scss
View File

@ -1,69 +1,82 @@
@import "../../../styles/utilities";
.select{
.select {
background-color: var(--white);
&.base{
&.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{
.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;
}
}

68
src/components/common/SelectCommon/SelectCommon.tsx
View File

@ -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<HTMLDivElement>(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}
>
<div className={classNames({
[s.selectTrigger] : true,
})}
>{selectedName}<IconVectorDown /></div>
<div className={classNames({
[s.selectOptionWrapper] : true,
[s[type]] : !!type,
[s[size]] : !!size,
})}
>
{
option.map(item =>
<SelectOption itemName={item.name} onClick={changeSelectedName} size={size} />
)
}
<div className={s.hoverWrapper}>
<div className={classNames({
[s.selectOptionWrapper] : true,
[s[type]] : !!type,
[s[size]] : !!size,
})}
>
{
option.map(item =>
<SelectOption itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
)
}
</div>
</div>
</div>
</>
)

3
src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
View File

@ -14,4 +14,7 @@
&:hover{
background-color: var(--gray);
}
&.isChoose{
background-color: var(--gray);
}
}

10
src/components/common/SelectCommon/SelectOption/SelectOption.tsx
View File

@ -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(
<div className={classNames({
[s.selectOption] : true,
[s[size]] : !!size,
[s.isChoose] : selected ,
})}
onClick = {changeName}
>{itemName}</div>

2
src/components/icons/IconVectorDown.tsx
View File

@ -1,5 +1,3 @@
const IconVectorDown = ({ ...props }) => {
return (
<svg

3
src/components/modules/blogs/BlogDetailImg/BlogDetailImg.module.scss Normal file
View File

@ -0,0 +1,3 @@
.image{
width: 100%;
}

6
src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx
View File

@ -1,17 +1,15 @@
import React from 'react';
import s from './BlogDetailImg.module.scss';
interface Props{
image:string,
alt?:string
}
const BlogDetailImg = ({image,alt}:Props) => {
return (
<>
<img src={image} alt={alt} />
<img className={s.image} src={image} alt={alt} />
</>
)
}

7
src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss
View File

@ -3,9 +3,14 @@
padding: 0 0 3.2rem 3.2rem;
}
.blogDetailPageWrapper{
padding: 0 2rem;
@screen md {
width: 90%;
margin:0 auto;
}
@screen xl{
width: 60%;
margin: 0 auto;
margin:0 auto;
}
.avt{
margin-bottom: 4rem;

4
src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx
View File

@ -33,7 +33,7 @@ const CRUMBS =[
}
]
const recipe = [
const BLOGS = [
{
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
@ -87,7 +87,7 @@ const BlogDetailPage = () => {
nameAuthor={BLOGDETAIL.nameAuthor}/>
</div>
<div className={s.relevantBlogPosts}>
<RelevantBlogPosts title="You will like also" />
<RelevantBlogPosts data={BLOGS} title="You will like also" bgcolor="cream"/>
</div>
</>

79
src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx
View File

@ -25,45 +25,89 @@ const BREADCRUMB = [
];
const CATEGORY = [
{
name: 'All',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
},
{
name: 'Malaysian',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
},
{
name: 'Vietnamese',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=vietnamese`,
},
{
name: 'Thailand',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=thailand`,
},
{
name: 'Indian',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=indian`,
},
{
name: 'Lao',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=lao`,
},
{
name: 'Chinese',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=chinese`,
},
{
name: 'Korean',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=korean`,
},
{
name: 'Japanese',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=japanese`,
},
{
name: 'Western',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=western`,
},
];
const CATEGORYSELECT = [
{
name: 'All',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
},
{
name: 'Malaysian',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
},
{
name: 'Vietnamese',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=vietnamese`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=vietnamese`,
},
{
name: 'Thailand',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=thailand`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=thailand`,
},
{
name: 'Indian',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=indian`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=indian`,
},
{
name: 'Lao',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=lao`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=lao`,
},
{
name: 'Chinese',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=chinese`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=chinese`,
},
{
name: 'Korean',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=korean`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=korean`,
},
{
name: 'Japanese',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=japanese`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=japanese`,
},
{
name: 'Western',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=western`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=western`,
},
];
@ -112,13 +156,16 @@ const RECIPES = [
const OPTIONSLECT=[
{
name:"SORT BY 1"
name:"SORT BY 1",
value:"1"
},
{
name:"SORT BY 2"
name:"SORT BY 2",
value:"2"
},
{
name:"SORT BY 3"
name:"SORT BY 3",
value:"3"
},
]
const BANNER =[
@ -155,16 +202,16 @@ const RecipesListPage = () => {
<div className={s.recipesList}>
<div className={s.sortByDesktop}>
<HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
<SelectCommon option={OPTIONSLECT} />
<SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
</div>
<div className={s.selectMobile}>
<div>
<label htmlFor="">Categories</label>
<SelectCommon option={CATEGORY}/>
<SelectCommon option={CATEGORYSELECT} placeholder="Categories"/>
</div>
<div>
<label htmlFor="">Sort By</label>
<SelectCommon option={OPTIONSLECT} />
<SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
</div>
</div>
<RecipesList recipes={RECIPES}/>