crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-25 11:11:24 +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
parent b44ca8cb50 670343c06c
commit ae5e7e8d43
11 changed files with 158 additions and 106 deletions
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 ( return (
<> <>
{/* <RecipeDetail /> */}
<BlogDetailPage /> <BlogDetailPage />
{/* <RecipeListPage/> */} {/* <RecipeListPage/> */}

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

@@ -1,69 +1,82 @@
@import "../../../styles/utilities"; @import "../../../styles/utilities";
.select{ .select {
background-color: var(--white); background-color: var(--white);
&.base{ &.base {
width: 20.6rem; width: 20.6rem;
.selectTrigger{ .selectTrigger {
width: 20.6rem; width: 20.6rem;
padding: 1.2rem 1.6rem; padding: 1.2rem 1.6rem;
} }
} }
&.large{ &.large {
width: 34.25rem; width: 34.25rem;
.selectTrigger{ .selectTrigger {
width: 34.25rem; width: 34.25rem;
padding: 1.6rem 1.6rem; padding: 1.6rem 1.6rem;
} }
} }
&.default{ &.default {
.selectTrigger{ .selectTrigger {
@apply border-solid border border-current; @apply border-solid border border-current;
} }
} }
&.custom{ &.custom {
.selectTrigger{ .selectTrigger {
@apply border-2; @apply border-2;
border-color: var(--border-line); border-color: var(--border-line);
color: var(--text-label); color: var(--text-label);
} }
} }
&.isActive{ &:hover {
.selectOptionWrapper{ cursor: pointer;
.hoverWrapper {
@apply block; @apply block;
animation: SelectAnimation 0.2s ease-out;
} }
} }
} }
.selectTrigger{ .selectTrigger {
@apply outline-none flex justify-between; @apply outline-none flex justify-between;
color: var(--text-active); color: var(--text-active);
border-radius: 0.8rem; border-radius: 0.8rem;
} }
.selectOptionWrapper{ .hoverWrapper {
@apply outline-none hidden z-10 absolute; @apply hidden outline-none absolute z-10;
border-radius: 0.8rem; padding-top: 0.6rem;
background-color: var(--white); .selectOptionWrapper {
padding: 0.4rem 0rem 0.4rem 0rem; border-radius: 0.8rem;
margin-top: 0.6rem; background-color: var(--white);
&.base{ padding: 0.4rem 0rem 0.4rem 0rem;
width: 20.6rem; &.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{ &:hover {
width: 34.25rem; @apply block;
}
&.default{
@apply border-solid border border-current;
}
&.custom{
@apply border-2;
border-color: var(--border-line);
color: var(--text-label);
}
&.active{
@apply hidden;
} }
} }
@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 s from './SelectCommon.module.scss'
import classNames from 'classnames' import classNames from 'classnames'
import { useState, useRef, useEffect } from 'react' import { useState } from 'react'
import { IconVectorDown } from 'src/components/icons' import { IconVectorDown } from 'src/components/icons'
import SelectOption from './SelectOption/SelectOption' import SelectOption from './SelectOption/SelectOption'
interface Props { interface Props {
children? : React.ReactNode, placeholder? : string,
size?: 'base' | 'large', size?: 'base' | 'large',
type?: 'default' | 'custom', 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 SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange}: Props) => {
const [isActive, setActive] = useState(false) const [selectedName, setSelectedName] = useState(placeholder)
const [selectedName, setSelectedName] = useState(children) const [selectedValue, setSelectedValue] = useState('')
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 changeActiveStatus = () => { const changeSelectedName = (item:string, value: string) => {
setActive(!isActive) setSelectedValue(value)
}
const changeSelectedName = (item:string) => {
setSelectedName(item) setSelectedName(item)
onChange && onChange(value)
} }
return( return(
<> <>
@@ -45,29 +27,29 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
[s.select] : true, [s.select] : true,
[s[size]] : !!size, [s[size]] : !!size,
[s[type]] : !!type, [s[type]] : !!type,
[s.isActive] : isActive,
})} })}
onClick = { changeActiveStatus }
ref = {ref}
> >
<div className={classNames({ <div className={classNames({
[s.selectTrigger] : true, [s.selectTrigger] : true,
})} })}
>{selectedName}<IconVectorDown /></div> >{selectedName}<IconVectorDown /></div>
<div className={classNames({ <div className={s.hoverWrapper}>
[s.selectOptionWrapper] : true, <div className={classNames({
[s[type]] : !!type, [s.selectOptionWrapper] : true,
[s[size]] : !!size, [s[type]] : !!type,
})} [s[size]] : !!size,
> })}
{ >
option.map(item => {
<SelectOption itemName={item.name} onClick={changeSelectedName} size={size} /> option.map(item =>
) <SelectOption itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
} )
}
</div>
</div> </div>
</div> </div>
</> </>
) )

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

@@ -14,4 +14,7 @@
&:hover{ &:hover{
background-color: var(--gray); 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' import classNames from 'classnames'
interface Props{ interface Props{
onClick: (value: string) => void, onClick: (name: string, value: string) => void,
itemName: string, itemName: string,
size: 'base' | 'large', size: 'base' | 'large',
value: string,
selected?: boolean,
} }
const SelectOption = ({onClick, itemName, size}: Props) => { const SelectOption = ({onClick, itemName, size, value, selected} : Props) => {
const changeName = () => { const changeName = () => {
onClick(itemName) onClick(itemName, value)
} }
return( return(
<div className={classNames({ <div className={classNames({
[s.selectOption] : true, [s.selectOption] : true,
[s[size]] : !!size, [s[size]] : !!size,
[s.isChoose] : selected ,
})} })}
onClick = {changeName} onClick = {changeName}
>{itemName}</div> >{itemName}</div>

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

@@ -1,5 +1,3 @@
const IconVectorDown = ({ ...props }) => { const IconVectorDown = ({ ...props }) => {
return ( return (
<svg <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 React from 'react';
import s from './BlogDetailImg.module.scss';
interface Props{ interface Props{
image:string, image:string,
alt?:string alt?:string
} }
const BlogDetailImg = ({image,alt}:Props) => { const BlogDetailImg = ({image,alt}:Props) => {
return ( 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; padding: 0 0 3.2rem 3.2rem;
} }
.blogDetailPageWrapper{ .blogDetailPageWrapper{
padding: 0 2rem;
@screen md { @screen md {
width: 90%;
margin:0 auto;
}
@screen xl{
width: 60%; width: 60%;
margin: 0 auto; margin:0 auto;
} }
.avt{ .avt{
margin-bottom: 4rem; 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", 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...", 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}/> nameAuthor={BLOGDETAIL.nameAuthor}/>
</div> </div>
<div className={s.relevantBlogPosts}> <div className={s.relevantBlogPosts}>
<RelevantBlogPosts title="You will like also" /> <RelevantBlogPosts data={BLOGS} title="You will like also" bgcolor="cream"/>
</div> </div>
</> </>

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

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