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

🔨 refactor: reponsive

Browse Source 
:%s
This commit is contained in:
unknown 2021-08-27 10:31:16 +07:00
parent 9ff88adb08
commit f612256f8c
16 changed files with 3791 additions and 3752 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
pages/index.tsx
View File

@ -1,92 +1,16 @@
import { FeaturedProductCard, Layout, ProductCaroucel, RecipeCard } from 'src/components/common'
import { HomeBanner, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
import image5 from "../public/assets/images/image5.png"
import image6 from "../public/assets/images/image6.png"
import image7 from "../public/assets/images/image7.png"
import image8 from "../public/assets/images/image8.png"
import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
// import image9 from "../public/assets/images/image9.png"
// import image10 from "../public/assets/images/image10.png"
// import image11 from "../public/assets/images/image11.png"
import image12 from "../public/assets/images/image12.png"
import { CollectionCarcoucel } from 'src/components/modules/home'
// import { CollectionCarcoucel } from 'src/components/modules/home'
import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe'
import image13 from "../public/assets/images/image13.png"
import image14 from "../public/assets/images/image14.png"
import { RecipeCardProps } from '../src/components/common/RecipeCard/RecipeCard';
const dataTest = [{
name:"Tomato",
weight:"250g",
category:"VEGGIE",
price:"Rp 27.500",
imageSrc:image5.src
},{
name:"Cucumber",
weight:"250g",
category:"VEGGIE",
price:"Rp 27.500",
imageSrc:image6.src
},{
name:"Carrot",
weight:"250g",
category:"VEGGIE",
price:"Rp 27.500",
imageSrc:image7.src
},{
name:"Salad",
weight:"250g",
category:"VEGGIE",
price:"Rp 27.500",
imageSrc:image8.src
},{
name:"Tomato",
weight:"250g",
category:"VEGGIE",
price:"Rp 27.500",
imageSrc:image5.src
},{
name:"Cucumber",
weight:"250g",
category:"VEGGIE",
price:"Rp 27.500",
imageSrc:image6.src
},{
name:"Tomato",
weight:"250g",
category:"VEGGIE",
price:"Rp 27.500",
imageSrc:image5.src
},{
name:"Cucumber",
weight:"250g",
category:"VEGGIE",
price:"Rp 27.500",
imageSrc:image6.src
},{
name:"Carrot",
weight:"250g",
category:"VEGGIE",
price:"Rp 27.500",
imageSrc:image7.src
},{
name:"Salad",
weight:"250g",
category:"VEGGIE",
price:"Rp 27.500",
imageSrc:image8.src
},{
name:"Tomato",
weight:"250g",
category:"VEGGIE",
price:"Rp 27.500",
imageSrc:image5.src
},{
name:"Cucumber",
weight:"250g",
category:"VEGGIE",
price:"Rp 27.500",
imageSrc:image6.src
}]
const recipe:RecipeCardProps[] = [{
title: "Special Recipe of Vietnamese Phở",
@ -118,11 +42,11 @@ const recipe:RecipeCardProps[] = [{
export default function Home() {
return (
<>
<CollectionCarcoucel data={dataTest} itemKey="product-1" title="VEGGIE" subTitle= "Last call! Shop deep deals on 100+ bulk picks while you can." />
<HomeRecipe data={recipe} itemKey="product-2" title="Special Recipes"/>
<HomeBanner />
<HomeCollection/>
<HomeVideo />
<HomeCTA />
<HomeRecipe data={recipe} itemKey="product-2" title="Special Recipes"/>
<HomeSubscribe />
</>
)

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

@ -2,7 +2,7 @@ import React from 'react'
import s from './CollectionHeading.module.scss'
import HeadingCommon from '../HeadingCommon/HeadingCommon'
interface CollectionHeadingProps {
export interface CollectionHeadingProps {
type?: 'default' | 'highlight' | 'light';
title: string;
subtitle: string;

10
src/components/common/ProductCard/ProductCard.module.scss
View File

@ -1,9 +1,9 @@
.productCardWarpper{
width: 20.8rem;
height: 31.8rem;
max-width: 20.8rem;
min-height: 31.8rem;
padding: 1.2rem 1.2rem 0 1.2rem;
margin-bottom: 1px;
@apply inline-flex flex-col justify-between;
@apply flex flex-col justify-between;
.cardTop{
@apply relative;
height: 13.8rem;
@ -49,10 +49,10 @@
}
}
.cardBot{
max-height: 4rem;
min-height: 4rem;
@apply flex justify-between items-center;
.cardButton{
width: 13.6rem;
// width: 13.6rem;
}
}
}

15
src/components/common/ProductCaroucel/ProductCaroucel.module.scss
View File

@ -1,12 +1,15 @@
@import "../../../styles/utilities";
.productCardWarpper{
@apply spacing-horizontal;
:global(.customArrow) {
&:global(.leftArrow){
left: calc(-6.4rem - 2rem);
}
&:global(.rightArrow){
right: calc(-6.4rem - 2rem);
@screen xl {
:global(.customArrow) {
&:global(.leftArrow){
left: calc(-6.4rem - 0rem);
}
&:global(.rightArrow){
right: calc(-6.4rem - 0rem);
}
}
}
}

7
src/components/common/ProductCaroucel/ProductCaroucel.tsx
View File

@ -15,11 +15,16 @@ const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 2,
mode: 'free',
breakpoints: {
'(min-width: 640px)': {
slidesPerView: 3,
},
'(min-width: 768px)': {
slidesPerView: 3,
},
'(min-width: 1024px)': {
slidesPerView: 5.5,
slidesPerView: 4.5,
},'(min-width: 1280px)': {
slidesPerView: 6,
},
},
}

10
src/components/common/RecipeCard/RecipeCard.module.scss
View File

@ -1,14 +1,14 @@
.recipeCardWarpper{
width: 39.2rem;
height: 34rem;
@apply inline-flex flex-col justify-between;
max-width: 39.2rem;
min-height: 34rem;
@apply inline-flex flex-col justify-start;
.image{
width: 100%;
height: 22rem;
max-height: 22rem;
border-radius: 2.4rem;
}
.title{
padding: 1.6rem 8rem 0.4rem 0.8rem;
padding: 1.6rem 0.8rem 0.4rem 0.8rem;
// padding: 0 0.8rem;
@apply font-bold;
font-size: 2rem;

14
src/components/common/RecipeCaroucel/RecipeCaroucel.module.scss
View File

@ -1,12 +1,14 @@
@import '../../../styles/utilities';
.recipeCardWarpper {
@apply spacing-horizontal;
:global(.customArrow) {
&:global(.leftArrow) {
left: calc(-6.4rem - 2rem);
}
&:global(.rightArrow) {
right: calc(-6.4rem - 2rem);
@screen xl {
:global(.customArrow) {
&:global(.leftArrow) {
left: calc(-6.4rem - 0rem);
}
&:global(.rightArrow) {
right: calc(-6.4rem - 0rem);
}
}
}
}

10
src/components/common/RecipeCaroucel/RecipeCaroucel.tsx
View File

@ -12,16 +12,22 @@ interface RecipeCaroucelProps
}
const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 1,
slidesPerView: 1.25,
mode: 'free',
spacing:24,
breakpoints: {
'(min-width: 768px)': {
'(min-width: 640px)': {
slidesPerView: 2,
},
'(min-width: 1024px)': {
slidesPerView: 2.5,
},
'(min-width: 1440px)': {
slidesPerView: 3,
},
'(min-width: 1536px)': {
slidesPerView: 3.5,
},
},
}
const RecipeCaroucel = ({ option, data, ...props }: RecipeCaroucelProps) => {

16
src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.module.scss
View File

@ -1,12 +1,14 @@
@import '../../../../styles/utilities';
.colectionCarcoucelWarpper {
padding-top: 5.6rem;
padding-bottom: 6.5rem;
@apply flex flex-col ;
padding-top: 5.6rem;
padding-bottom: 6.5rem;
@apply flex flex-col;
.top {
@apply spacing-horizontal flex w-full justify-between;
.right{
margin-right: 14.76;
}
@apply spacing-horizontal flex w-full justify-between;
@screen xl {
.right {
margin-right: 2.476rem;
}
}
}
}

13
src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx
View File

@ -4,13 +4,12 @@ import {
ProductCaroucel,
ViewAllItem,
} from 'src/components/common'
import { CollectionHeadingProps } from 'src/components/common/CollectionHeading/CollectionHeading'
import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
import s from './CollectionCarcoucel.module.scss'
interface ColectionCarcoucelProps {
interface ColectionCarcoucelProps extends CollectionHeadingProps {
data: ProductCardProps[]
itemKey: string
title: string
subTitle: string
viewAllLink?: string
}
@ -18,19 +17,21 @@ const ColectionCarcoucel = ({
data,
itemKey,
title,
subTitle,
subtitle,
type
}: ColectionCarcoucelProps) => {
return (
<div className={s.colectionCarcoucelWarpper}>
<div className={s.top}>
<div className={s.left}>
<CollectionHeading
subtitle={subTitle}
type={type}
subtitle={subtitle}
title={title}
></CollectionHeading>
</div>
<div className={s.right}>
<ViewAllItem />
<ViewAllItem link="#"/>
</div>
</div>
<div className={s.bot}>

138
src/components/modules/home/HomeCollection/HomeCollection.tsx Normal file
View File

@ -0,0 +1,138 @@
import React from 'react'
import { CollectionCarcoucel } from '..'
import image5 from '../../../../../public/assets/images/image5.png'
import image6 from '../../../../../public/assets/images/image6.png'
import image7 from '../../../../../public/assets/images/image7.png'
import image8 from '../../../../../public/assets/images/image8.png'
interface HomeCollectionProps {}
const dataTest = [
{
name: 'Tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image5.src,
},
{
name: 'Cucumber',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image6.src,
},
{
name: 'Carrot',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image7.src,
},
{
name: 'Salad',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image8.src,
},
{
name: 'Tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image5.src,
},
{
name: 'Cucumber',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image6.src,
},
{
name: 'Tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image5.src,
},
{
name: 'Cucumber',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image6.src,
},
{
name: 'Carrot',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image7.src,
},
{
name: 'Salad',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image8.src,
},
{
name: 'Tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image5.src,
},
{
name: 'Cucumber',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: image6.src,
},
]
const HomeCollection = (props: HomeCollectionProps) => {
return (
<div className="w-full">
<CollectionCarcoucel
data={dataTest}
itemKey="product-1"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
<CollectionCarcoucel
data={dataTest}
itemKey="product-2"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
<CollectionCarcoucel
data={dataTest}
itemKey="product-3"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
<CollectionCarcoucel
data={dataTest}
itemKey="product-4"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
<CollectionCarcoucel
data={dataTest}
itemKey="product-5"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
<CollectionCarcoucel
data={dataTest}
itemKey="product-6"
title="VEGGIE"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
</div>
)
}
export default HomeCollection

14
src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
View File

@ -6,8 +6,10 @@
@apply flex flex-col;
.top {
@apply spacing-horizontal flex w-full justify-between;
.right {
margin-right: 14.76;
@screen xl {
.right {
margin-right: 2.476rem;
}
}
}
.mid{
@ -16,8 +18,12 @@
@apply flex justify-start spacing-horizontal;
.tab{
padding: 1.6rem 1.6rem 0.8rem 1.6rem;
font-size: 3.2rem;
line-height: 4rem;
font-size: 2.4rem;
line-height: 2.8rem;
@screen md{
font-size: 3.2rem;
line-height: 4rem;
}
outline: none;
&.active{
@apply text-background custom-border-radius bg-primary;

2
src/components/modules/home/HomeRecipe/HomeRecipe.tsx
View File

@ -19,7 +19,7 @@ const HomeRecipe = ({ data, itemKey, title }: HomeRecipeProps) => {
<HeadingCommon>{title}</HeadingCommon>
</div>
<div className={s.right}>
<ViewAllItem />
<ViewAllItem link="#"/>
</div>
</div>
<div className={s.mid}>

1
src/components/modules/home/index.ts
View File

@ -3,3 +3,4 @@ export { default as CollectionCarcoucel } from './CollectionCarcoucel/Collection
export { default as HomeCTA } from './HomeCTA/HomeCTA'
export { default as HomeSubscribe } from './HomeSubscribe/HomeSubscribe'
export { default as HomeVideo } from './HomeVideo/HomeVideo'
export { default as HomeCollection } from './HomeCollection/HomeCollection'

4
src/styles/_utilities.scss
View File

@ -88,10 +88,6 @@
padding-left: 6.4rem;
padding-right: 6.4rem;
}
@screen md {
padding-left: 11.2rem;
padding-right: 11.2rem;
}
}
.spacing-horizontal-left {
padding-left: 2rem;

7201
yarn.lock
View File

File diff suppressed because it is too large Load Diff