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

🎨 styles: FeaturedProductCard shape common, img common

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-09-16 15:16:23 +07:00
parent 035fca4563
commit 1d988ee93a
5 changed files with 63 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
pages/test.tsx
View File

@@ -1,102 +1,84 @@
import { import {
CartDrawer, FeaturedProductCard,
Layout Layout
} from 'src/components/common'; } from 'src/components/common';
import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList';
// import { RecipeListPage } from 'src/components/modules/recipes'; // import { RecipeListPage } from 'src/components/modules/recipes';
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'; import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
import { useModalCommon } from 'src/components/hooks'; import { PRODUCT_DATA_TEST, PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data';
const CATEGORY = [ const CATEGORY = [
{ {
name: 'All', name: 'All',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
}, },
{ {
name: 'Veggie', name: 'Veggie',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
}, },
{ {
name: 'Seafood', name: 'Seafood',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
}, },
{ {
name: 'Frozen', name: 'Frozen',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
}, },
{ {
name: 'Coffee Bean', name: 'Coffee Bean',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
}, },
{ {
name: 'Sauce', name: 'Sauce',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
}, },
] ]
const BRAND = [ const BRAND = [
{ {
name: 'Maggi', name: 'Maggi',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
}, },
{ {
name: 'Cholimes', name: 'Cholimes',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
}, },
{ {
name: 'Chinsu', name: 'Chinsu',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
} }
]; ];
const FEATURED = [ const FEATURED = [
{ {
name: 'Best Sellers', name: 'Best Sellers',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
}, },
{ {
name: 'Sales', name: 'Sales',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
}, },
{ {
name: 'New Item', name: 'New Item',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
}, },
{ {
name: 'Viewed', name: 'Viewed',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`, link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
} }
]; ];
import CheckoutSuccess from 'src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess'
import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon'
import SkeletonParagraph from 'src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph'
import SkeletonImage from 'src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage'
const data = PRODUCT_DATA_TEST[0]
export default function Test() { export default function Test() {
return ( return (
<> <>
<div className="shape-common-border"> <FeaturedProductCard
<div className="inner"> imageSrc={data.imageSrc}
Lorem ipsum dolor sit amet. title="Sale 25% coffee bean"
</div> subTitle="50 first orders within a day"
</div> price={data.price}
{/* <BlogDetailPage /> */} originPrice="$20.00" />
{/* <RecipeListPage/> */}
{/*<MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>*/}
{/* <button onClick={toggle}>toggle menu : {visibleMenuFilter.toString()}</button>
<MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleMenuFilter} onClose={closeMenuFilter}/> */}
{/* <CartDrawer /> */}
<div className="shape-common-lg">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit maiores aut, delectus assumenda explicabo, dolore facilis, quasi quae sed obcaecati doloribus dolorum architecto aperiam nisi dignissimos consequuntur amet neque possimus.
</div>
<div className="shape-common-lg-border">
<div className="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, porro aut. Quas, consequuntur! Officiis magni cum placeat magnam ut hic beatae error facere obcaecati. Labore eius explicabo fugit minus veritatis.
</div>
</div>
</> </>
) )
} }

2
src/components/common/ButtonIconBuy/ButtonIconBuy.tsx
View File

@@ -3,7 +3,7 @@ import { IconBuy } from 'src/components/icons'
import ButtonCommon from '../ButtonCommon/ButtonCommon' import ButtonCommon from '../ButtonCommon/ButtonCommon'
interface Props { interface Props {
type?: 'primary' | 'light' | 'ghost', type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
size?: 'default' | 'large' | 'small', size?: 'default' | 'large' | 'small',
loading?: boolean, loading?: boolean,
disabled?: boolean, disabled?: boolean,

24
src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
View File

@@ -3,7 +3,7 @@
width: 59.8rem; width: 59.8rem;
height: 28.8rem; height: 28.8rem;
padding: 2.4rem; padding: 2.4rem;
@apply bg-primary-light inline-flex justify-start items-center custom-border-radius ; @apply bg-primary-light inline-flex justify-start items-center shape-common;
.left{ .left{
width: 24rem; width: 24rem;
height: 24rem; height: 24rem;
@@ -30,18 +30,15 @@
line-height: 2.4rem; line-height: 2.4rem;
} }
.priceWrapper{ .priceWrapper{
@apply flex justify-start; @apply flex justify-start sm-headline;
.price{ .price{
@apply font-bold; @apply font-bold sm-headline;
font-size: 2rem;
line-height: 2.8rem;
letter-spacing: -0.01em;
color: var(--text-active); color: var(--text-active);
} }
.originPrice{ .originPrice{
@apply sm-headline;
font-weight: normal;
margin-left: 0.8rem; margin-left: 0.8rem;
font-size: 2rem;
line-height: 2.8rem;
color: var(--text-label); color: var(--text-label);
text-decoration-line: line-through; text-decoration-line: line-through;
} }
@@ -50,11 +47,18 @@
.buttonWarpper{ .buttonWarpper{
@apply flex; @apply flex;
.icon{ .icon{
width: 5.6rem; button {
>div {
@apply bg-primary-light;
}
}
} }
.button{ .button{
margin-left: 0.8rem; margin-left: 0.8rem;
width: 20.6rem; flex: 1;
button {
@apply w-full;
}
} }
} }
} }

5
src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
View File

@@ -4,6 +4,7 @@ import s from './FeaturedProductCard.module.scss'
import { LANGUAGE } from '../../../utils/language.utils' import { LANGUAGE } from '../../../utils/language.utils'
import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy' import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
import ButtonCommon from '../ButtonCommon/ButtonCommon' import ButtonCommon from '../ButtonCommon/ButtonCommon'
import { ImgWithLink } from '..'
interface FeaturedProductCardProps extends FeaturedProductProps { interface FeaturedProductCardProps extends FeaturedProductProps {
buttonText?: string buttonText?: string
} }
@@ -19,7 +20,7 @@ const FeaturedProductCard = ({
return ( return (
<div className={s.featuredProductCardWarpper}> <div className={s.featuredProductCardWarpper}>
<div className={s.left}> <div className={s.left}>
<img src={imageSrc} alt="image" /> <ImgWithLink src={imageSrc} alt={title}/>
</div> </div>
<div className={s.right}> <div className={s.right}>
<div className={s.rightTop}> <div className={s.rightTop}>
@@ -32,7 +33,7 @@ const FeaturedProductCard = ({
</div> </div>
<div className={s.buttonWarpper}> <div className={s.buttonWarpper}>
<div className={s.icon}> <div className={s.icon}>
<ButtonIconBuy /> <ButtonIconBuy size='default'/>
</div> </div>
<div className={s.button}> <div className={s.button}>
<ButtonCommon>{buttonText}</ButtonCommon> <ButtonCommon>{buttonText}</ButtonCommon>

2
src/styles/_base.scss
View File

@@ -3,7 +3,7 @@
:root { :root {
--primary: #5b9a74; --primary: #5b9a74;
--primary-light: #e0f6e8; --primary-light: #e3f2e9;
--primary-lightest: #effaf4; --primary-lightest: #effaf4;
--info-dark: #00317a; --info-dark: #00317a;