mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 04:14:18 +00:00
feat: create components BlogDetalImg BlogContent BlogDetailPage
This commit is contained in:
commit
ae5e7e8d43
@ -65,6 +65,7 @@ export default function Test() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{/* <RecipeDetail /> */}
|
||||||
<BlogDetailPage />
|
<BlogDetailPage />
|
||||||
|
|
||||||
{/* <RecipeListPage/> */}
|
{/* <RecipeListPage/> */}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -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>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
@ -14,4 +14,7 @@
|
|||||||
&:hover{
|
&:hover{
|
||||||
background-color: var(--gray);
|
background-color: var(--gray);
|
||||||
}
|
}
|
||||||
|
&.isChoose{
|
||||||
|
background-color: var(--gray);
|
||||||
|
}
|
||||||
}
|
}
|
@ -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>
|
||||||
|
@ -1,5 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
const IconVectorDown = ({ ...props }) => {
|
const IconVectorDown = ({ ...props }) => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
|
@ -0,0 +1,3 @@
|
|||||||
|
.image{
|
||||||
|
width: 100%;
|
||||||
|
}
|
@ -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} />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
|
@ -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}/>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user