mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
Merge pull request #29 from KieIO/m5-tan
M5 tan FeaturedCardBlog BlogsList BlogsPage
This commit is contained in:
@@ -42,6 +42,9 @@ module.exports = withCommerceConfig({
|
||||
},
|
||||
].filter(Boolean)
|
||||
},
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
}
|
||||
})
|
||||
|
||||
// Don't delete this console log, useful to see the commerce config in Vercel deployments
|
||||
|
14
pages/blogs.tsx
Normal file
14
pages/blogs.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Layout } from 'src/components/common';
|
||||
import { BlogsList, FeaturedCardBlog, BlogHeading, BlogBreadCrumb } from 'src/components/modules/blogs';
|
||||
|
||||
export default function BlogsPage() {
|
||||
return(
|
||||
<>
|
||||
<BlogBreadCrumb />
|
||||
<BlogHeading />
|
||||
<FeaturedCardBlog />
|
||||
<BlogsList />
|
||||
</>
|
||||
)
|
||||
}
|
||||
BlogsPage.Layout = Layout
|
BIN
public/assets/images/author.png
Normal file
BIN
public/assets/images/author.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.6 KiB |
BIN
public/assets/images/image20.png
Normal file
BIN
public/assets/images/image20.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 406 KiB |
BIN
public/assets/images/image21.png
Normal file
BIN
public/assets/images/image21.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 180 KiB |
BIN
public/assets/images/image22.png
Normal file
BIN
public/assets/images/image22.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 187 KiB |
BIN
public/assets/images/image23.png
Normal file
BIN
public/assets/images/image23.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 198 KiB |
@@ -34,4 +34,4 @@ const BreadcrumbCommon = ({ crumbs, showHomePage = true }: BreadcrumbCommonProps
|
||||
)
|
||||
}
|
||||
|
||||
export default BreadcrumbCommon
|
||||
export default BreadcrumbCommon
|
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
interface BreadcrumbSeparatorProps {
|
||||
children?: React.ReactNode
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => {
|
||||
|
@@ -3,7 +3,6 @@
|
||||
.cardBlogWarpper {
|
||||
@apply inline-flex flex-col justify-start;
|
||||
max-width: 39.2rem;
|
||||
min-height: 34.4rem;
|
||||
.image {
|
||||
width: 100%;
|
||||
max-height: 22rem;
|
||||
@@ -11,6 +10,9 @@
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
img{
|
||||
border-radius: 2.4rem;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
padding: 1.6rem 0.8rem 0.4rem 0.8rem;
|
||||
|
@@ -52,7 +52,7 @@ const FOOTER_COLUMNS = [
|
||||
},
|
||||
{
|
||||
name: 'Blog',
|
||||
link: ROUTE.TERM_CONDITION,
|
||||
link: ROUTE.BLOGS,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
15
src/components/common/TabCommon/TabCommon.module.scss
Normal file
15
src/components/common/TabCommon/TabCommon.module.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@import '../../../styles/utilities';
|
||||
|
||||
.tabCommonOutSide {
|
||||
@apply spacing-horizontal;
|
||||
|
||||
.tabCommon {
|
||||
@apply flex;
|
||||
position: relative;
|
||||
border-bottom: 2px solid #FBFBFB;
|
||||
padding-top: 1.6rem;
|
||||
padding-bottom: 1.6rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
47
src/components/common/TabCommon/TabCommon.tsx
Normal file
47
src/components/common/TabCommon/TabCommon.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import React, { useState } from "react"
|
||||
import s from './TabCommon.module.scss'
|
||||
|
||||
import TabItem from './TabItem/TabItem'
|
||||
|
||||
interface TabCommonProps {
|
||||
|
||||
}
|
||||
|
||||
const TabCommon = ({ } : TabCommonProps) => {
|
||||
const active = "active", unActive = "";
|
||||
|
||||
const [item1Active, setItem1Active] = useState(active);
|
||||
const [item2Active, setItem2Active] = useState(unActive);
|
||||
const [item3Active, setItem3Active] = useState(unActive);
|
||||
|
||||
function toggleItem1():void {
|
||||
setItem1Active(active)
|
||||
|
||||
setItem2Active(unActive)
|
||||
setItem3Active(unActive)
|
||||
}
|
||||
function toggleItem2():void {
|
||||
setItem2Active(active)
|
||||
|
||||
setItem1Active(unActive)
|
||||
setItem3Active(unActive)
|
||||
}
|
||||
function toggleItem3():void {
|
||||
setItem3Active(active)
|
||||
|
||||
setItem1Active(unActive)
|
||||
setItem2Active(unActive)
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={s.tabCommonOutSide}>
|
||||
<div className={s.tabCommon}>
|
||||
<span onClick={toggleItem1}><TabItem active={item1Active}>Wait for Comfirmation</TabItem></span>
|
||||
<span onClick={toggleItem2}><TabItem active={item2Active}>Delivering</TabItem></span>
|
||||
<span onClick={toggleItem3}><TabItem active={item3Active}>Delivered</TabItem></span>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabCommon;
|
16
src/components/common/TabCommon/TabItem/TabItem.module.scss
Normal file
16
src/components/common/TabCommon/TabItem/TabItem.module.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
@import '../../../../styles/utilities';
|
||||
|
||||
.tabItem {
|
||||
margin-right: 4.8rem;
|
||||
padding-top: 1.6rem;
|
||||
padding-bottom: 1.6rem;
|
||||
|
||||
&.active {
|
||||
@apply font-bold;
|
||||
border-bottom: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
}
|
21
src/components/common/TabCommon/TabItem/TabItem.tsx
Normal file
21
src/components/common/TabCommon/TabItem/TabItem.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import classNames from "classnames";
|
||||
import React from "react"
|
||||
import s from './TabItem.module.scss'
|
||||
|
||||
interface TabItemProps {
|
||||
active: string;
|
||||
target?: string;
|
||||
children?: string;
|
||||
}
|
||||
|
||||
const TabItem = ({ active = "", children } : TabItemProps) => {
|
||||
return (
|
||||
<span className={classNames(s.tabItem, {
|
||||
[s[active]]: active
|
||||
})}>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabItem;
|
@@ -35,6 +35,7 @@ export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreate
|
||||
export { default as CardBlog} from './CardBlog/CardBlog'
|
||||
export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPosts'
|
||||
export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
|
||||
export { default as BreadcrumbCommon } from './BreadcrumbCommon/BreadcrumbCommon'
|
||||
export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
|
||||
export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
|
||||
export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
|
||||
|
@@ -0,0 +1,5 @@
|
||||
@import '../../../../styles/utilities';
|
||||
|
||||
.accountNavigation {
|
||||
@apply spacing-horizontal;
|
||||
}
|
@@ -0,0 +1,50 @@
|
||||
import React, { useState } from "react"
|
||||
import s from './AccountNavigation.module.scss'
|
||||
|
||||
import AccountNavigationItem from './components/AccountNavigationItem'
|
||||
|
||||
interface AccountNavigationProps {
|
||||
|
||||
}
|
||||
|
||||
const AccountNavigation = ({ } : AccountNavigationProps) => {
|
||||
const active = "active", unActive = "";
|
||||
|
||||
const [item1Active, setItem1Active] = useState(active);
|
||||
const [item2Active, setItem2Active] = useState(unActive);
|
||||
const [item3Active, setItem3Active] = useState(unActive);
|
||||
|
||||
function toggleItem1():void {
|
||||
setItem1Active(active)
|
||||
|
||||
setItem2Active(unActive)
|
||||
setItem3Active(unActive)
|
||||
}
|
||||
function toggleItem2():void {
|
||||
setItem2Active(active)
|
||||
|
||||
setItem1Active(unActive)
|
||||
setItem3Active(unActive)
|
||||
}
|
||||
function toggleItem3():void {
|
||||
setItem3Active(active)
|
||||
|
||||
setItem1Active(unActive)
|
||||
setItem2Active(unActive)
|
||||
}
|
||||
return (
|
||||
<section className={s.accountNavigation}>
|
||||
<div onClick={toggleItem1}>
|
||||
<AccountNavigationItem active={item1Active}>Customer Information</AccountNavigationItem>
|
||||
</div>
|
||||
<div onClick={toggleItem2}>
|
||||
<AccountNavigationItem active={item2Active}>Your Orders</AccountNavigationItem>
|
||||
</div>
|
||||
<div onClick={toggleItem3}>
|
||||
<AccountNavigationItem active={item3Active}>Favourites</AccountNavigationItem>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default AccountNavigation
|
@@ -0,0 +1,19 @@
|
||||
@import '../../../../../styles/utilities';
|
||||
|
||||
.accountNavigationItem {
|
||||
@apply bg-gray;
|
||||
width: 28rem;
|
||||
padding: 1.2rem 0 1.2rem 1.6rem;
|
||||
margin-bottom: 1.2rem;
|
||||
|
||||
|
||||
&:hover {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #FBFBFB;
|
||||
border-radius: 0 1.6rem 1.6rem 0;
|
||||
border-left: 2px solid var(--primary);
|
||||
}
|
||||
}
|
@@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
import classNames from "classnames";
|
||||
import s from './AccountNavigationItem.module.scss'
|
||||
|
||||
interface AccountNavigationItemProps {
|
||||
children?: string;
|
||||
active?: string;
|
||||
target?: string;
|
||||
}
|
||||
|
||||
const AccountNavigationItem = ({ children, active="" } : AccountNavigationItemProps) => {
|
||||
return (
|
||||
<div className={classNames(s.accountNavigationItem, {
|
||||
[s[active]]:active
|
||||
})}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AccountNavigationItem
|
@@ -0,0 +1,7 @@
|
||||
@import "../../../../styles/utilities";
|
||||
.breadCrumbWrapper {
|
||||
@apply py-12 spacing-horizontal;
|
||||
@screen lg {
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
}
|
@@ -0,0 +1,16 @@
|
||||
import { BreadcrumbCommon } from "src/components/common"
|
||||
import s from './BlogBreadCrumb.module.scss'
|
||||
|
||||
const BLOG_DATA = [
|
||||
{link: "/blogs", name: "Blog"},
|
||||
];
|
||||
|
||||
const BlogBreadCrumb = () => {
|
||||
return (
|
||||
<section className={s.breadCrumbWrapper}>
|
||||
<BreadcrumbCommon crumbs={BLOG_DATA} showHomePage={true}/>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default BlogBreadCrumb
|
@@ -0,0 +1,9 @@
|
||||
@import "../../../../styles/utilities";
|
||||
|
||||
.headingWrapper {
|
||||
@apply flex spacing-horizontal-left pb-16 justify-center;
|
||||
.heading{
|
||||
max-width: 121.6rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
18
src/components/modules/blogs/BlogHeading/BlogHeading.tsx
Normal file
18
src/components/modules/blogs/BlogHeading/BlogHeading.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { HeadingCommon } from "src/components/common"
|
||||
import s from './BlogHeading.module.scss'
|
||||
|
||||
interface BlogHeadingProps {
|
||||
children?: React.ReactNode,
|
||||
heading?: string,
|
||||
}
|
||||
|
||||
const BlogHeading = ({heading = "BLOG"}: BlogHeadingProps) => {
|
||||
return (
|
||||
<section className={s.headingWrapper}>
|
||||
<div className={s.heading}>
|
||||
<HeadingCommon>{heading}</HeadingCommon>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
export default BlogHeading
|
23
src/components/modules/blogs/BlogsList/BlogsList.module.scss
Normal file
23
src/components/modules/blogs/BlogsList/BlogsList.module.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
@import "../../../../styles/utilities";
|
||||
|
||||
.wrapper {
|
||||
@apply flex flex-col spacing-horizontal items-center;
|
||||
padding-bottom: 16.8rem;
|
||||
.list {
|
||||
@apply grid grid-cols-1 gap-8;
|
||||
max-width: 121.6rem;
|
||||
@screen md {
|
||||
@apply grid-cols-2;
|
||||
}
|
||||
@screen lg {
|
||||
@apply grid-cols-3;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
@apply pb-16;
|
||||
}
|
||||
.pagination {
|
||||
@apply flex justify-center items-center ;
|
||||
padding-top: 0.8rem;
|
||||
}
|
||||
}
|
157
src/components/modules/blogs/BlogsList/BlogsList.tsx
Normal file
157
src/components/modules/blogs/BlogsList/BlogsList.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import React, { useState } from 'react'
|
||||
import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
|
||||
import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
|
||||
import s from "./BlogsList.module.scss"
|
||||
import { DEFAULT_BLOG_PAGE_SIZE } from 'src/utils/constanst.utils'
|
||||
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 image21 from '../../../../../public/assets/images/image21.png'
|
||||
import image22 from '../../../../../public/assets/images/image22.png'
|
||||
import image23 from '../../../../../public/assets/images/image23.png'
|
||||
|
||||
interface BlogsListProps {
|
||||
data?: BlogCardProps[],
|
||||
}
|
||||
|
||||
const BLOGSLIST_DATA = [
|
||||
{
|
||||
imageSrc: image15.src,
|
||||
title: "1",
|
||||
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image16.src,
|
||||
title: "2",
|
||||
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image17.src,
|
||||
title: "3",
|
||||
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image21.src,
|
||||
title: "4",
|
||||
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image22.src,
|
||||
title: "5",
|
||||
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image23.src,
|
||||
title: "6",
|
||||
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image15.src,
|
||||
title: "7",
|
||||
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image16.src,
|
||||
title: "8",
|
||||
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image17.src,
|
||||
title: "9",
|
||||
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image23.src,
|
||||
title: "10",
|
||||
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image21.src,
|
||||
title: "11",
|
||||
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image22.src,
|
||||
title: "12",
|
||||
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image15.src,
|
||||
title: "13",
|
||||
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image16.src,
|
||||
title: "14",
|
||||
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image17.src,
|
||||
title: "15",
|
||||
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image21.src,
|
||||
title: "16",
|
||||
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image23.src,
|
||||
title: "17",
|
||||
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
{
|
||||
imageSrc: image22.src,
|
||||
title: "18",
|
||||
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
|
||||
slug: "happy-diet"
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
|
||||
const [currentPage, setCurrentPage] = useState(0)
|
||||
const onPageChange = (page:number) => {
|
||||
setCurrentPage(page)
|
||||
}
|
||||
|
||||
return (
|
||||
<section>
|
||||
<div className={s.wrapper}>
|
||||
<div className={s.list}>
|
||||
{
|
||||
data.slice(currentPage*DEFAULT_BLOG_PAGE_SIZE,(currentPage+1)*DEFAULT_BLOG_PAGE_SIZE).map((product,index)=> {
|
||||
return(
|
||||
<div className={s.card} key={`${product.title}-${index}`}>
|
||||
<CardBlog {...product} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<div className={s.pagination}>
|
||||
<PaginationCommon total={data.length} pageSize={DEFAULT_BLOG_PAGE_SIZE} onChange={onPageChange}/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default BlogsList
|
@@ -0,0 +1,34 @@
|
||||
@import "../../../../styles/utilities";
|
||||
|
||||
.featuredCard {
|
||||
@apply flex flex-row justify-center spacing-horizontal pb-16;
|
||||
.featuredCardWrapper {
|
||||
@apply flex flex-col;
|
||||
@screen lg {
|
||||
@apply flex-row justify-between;
|
||||
}
|
||||
max-width: 121.6rem;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
max-width: 59.8rem;
|
||||
img {
|
||||
border-radius: 2.4rem;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex-shrink: 3;
|
||||
@screen lg {
|
||||
margin-left: 6.4rem;
|
||||
}
|
||||
}
|
||||
.titleWrapper {
|
||||
@apply flex flex-col items-start font-heading heading-3;
|
||||
margin-bottom: 1.6rem;
|
||||
.title {
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
margin-top: 1.6rem
|
||||
}
|
@@ -0,0 +1,52 @@
|
||||
import s from './FeaturedCardBlog.module.scss'
|
||||
import { Author, DateTime } from 'src/components/common'
|
||||
import Image from "next/image";
|
||||
import image20 from '../../../../../public/assets/images/image20.png'
|
||||
import author from '../../../../../public/assets/images/author.png'
|
||||
|
||||
interface FeaturedCardBlogProps{
|
||||
title?: string,
|
||||
content?: string,
|
||||
imgSrc?: any,
|
||||
imgAuthor?: any,
|
||||
date?: string,
|
||||
authorName?: string,
|
||||
}
|
||||
|
||||
const FEATURED_DATA = {
|
||||
title: "Flammekueche with green asparagus",
|
||||
content: "Traditionally, the Flammekueche is made with rapeseed oil, which, contrary to popular belief, is indeed an oil that can be cooked hot and is not limited to seasoning. It is important to vary the oils in the kitchen to take advantage of the benefits of each. Rapeseed oil is an oil rich in omega 3 which participate in the proper functioning of the cardiovascular system as well as in vitamins E which contributes to the protection of cells against oxidative stress. In short, oils are your friends 😉",
|
||||
imgSrc: image20,
|
||||
imgAuthor: author.src,
|
||||
date: "APRIL 30, 2021",
|
||||
author: "Alessandro Del Piero"
|
||||
}
|
||||
|
||||
const FeaturedCardBlog = ({
|
||||
title = FEATURED_DATA.title,
|
||||
content = FEATURED_DATA.content,
|
||||
imgSrc = FEATURED_DATA.imgSrc,
|
||||
imgAuthor = FEATURED_DATA.imgAuthor,
|
||||
date = FEATURED_DATA.date,
|
||||
authorName = FEATURED_DATA.author
|
||||
}: FeaturedCardBlogProps) => {
|
||||
return (
|
||||
<section className={s.featuredCard}>
|
||||
<div className={s.featuredCardWrapper}>
|
||||
<div className={s.left}>
|
||||
<Image src={imgSrc} alt="image feature card"/>
|
||||
</div>
|
||||
<div className={s.right}>
|
||||
<div className={s.titleWrapper}>
|
||||
<DateTime date={date}/>
|
||||
<a className={s.title}>{title}</a>
|
||||
</div>
|
||||
<Author name={authorName} image={imgAuthor}/>
|
||||
<div className={s.content}>{content}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default FeaturedCardBlog
|
4
src/components/modules/blogs/index.tsx
Normal file
4
src/components/modules/blogs/index.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
export { default as FeaturedCardBlog } from './FeaturedCardBlog/FeaturedCardBlog'
|
||||
export { default as BlogsList } from './BlogsList/BlogsList'
|
||||
export { default as BlogHeading } from './BlogHeading/BlogHeading'
|
||||
export { default as BlogBreadCrumb } from './BlogBreadcrumb/BlogBreadcrumb'
|
@@ -0,0 +1,26 @@
|
||||
import { DateTime } from 'src/components/common'
|
||||
import s from './DeliveryAndPolicyContent.module.scss'
|
||||
|
||||
interface DeliveryAndPolicyContentProps{
|
||||
title?: string,
|
||||
date: string,
|
||||
content: string[],
|
||||
}
|
||||
|
||||
const DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyContentProps) => {
|
||||
return (
|
||||
<section>
|
||||
<div className={s.titleWrapper}>
|
||||
<div>LASTEST UPDATED:
|
||||
<DateTime date={date} />
|
||||
</div>
|
||||
<div className={s.title}>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeliveryAndPolicyContent
|
1
src/components/modules/delivery-policy/index.tsx
Normal file
1
src/components/modules/delivery-policy/index.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export { default as DeliveryAndPolicyContent} from './DeliveryAndPolicyContent/DeliveryAndPolicyContent'
|
@@ -53,3 +53,4 @@ export const KEY = {
|
||||
|
||||
export const OPTION_ALL = 'all';
|
||||
export const DEFAULT_PAGE_SIZE=20;
|
||||
export const DEFAULT_BLOG_PAGE_SIZE=6;
|
||||
|
@@ -12,7 +12,6 @@
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"noUnusedLocals": true,
|
||||
@@ -26,7 +25,8 @@
|
||||
"@commerce/*": ["framework/commerce/*"],
|
||||
"@framework": ["framework/vendure"],
|
||||
"@framework/*": ["framework/vendure/*"]
|
||||
}
|
||||
},
|
||||
"isolatedModules": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
|
||||
"exclude": [
|
||||
|
Reference in New Issue
Block a user