Skip to content

Commit 6e77517

Browse files
author
VTEX
committed
commenting last 2 shelfs | adjusting mobile CSS
1 parent 5670d21 commit 6e77517

6 files changed

Lines changed: 73 additions & 49 deletions

File tree

‎src/components/product/ProductSummary/ProductSummary.module.css‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@
22
@apply line-through opacity-60;
33
}
44

5-
[data-p-s-simple-container] {
6-
@apply px-28 h-full inline-flex flex-col relative;
7-
}
8-
9-
[data-p-s-advanced-container] {
10-
@apply px-12 h-full inline-flex flex-col relative;
5+
[data-p-s-simple-container], [data-p-s-advanced-container] {
6+
@apply px-4 sm:px-12 h-full inline-flex flex-col relative;
117
}
128

139
[data-p-s-image-container] {

src/components/sections/Shelf/Shelf.module.css renamed to src/components/sections/Shelf/Shelf.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.container {
2-
@apply w-screen px-28;
3-
}
4-
51
[data-store-carousel] {
62
@apply relative;
73
}

‎src/components/sections/Shelf/index.tsx‎

Lines changed: 47 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,42 +5,43 @@ import useMediaQuery from 'src/utils/useMediaQuery'
55
import ProductSummary from 'src/components/product/ProductSummary'
66
import type { ProductSummary_ProductFragment } from 'src/components/product/ProductSummary/__generated__/ProductSummary_product.graphql'
77

8-
import * as styles from './Shelf.module.css'
8+
import './Shelf.css'
99

1010
interface Props {
11-
products?: ProductSummary_ProductFragment[] | any
11+
products: ProductSummary_ProductFragment[]
1212
productsPerPage: number[]
1313
title?: string
14+
variant?: 'simple' | 'advanced'
1415
}
1516

16-
const Shelf: FC<Props & React.HTMLProps<HTMLDivElement>> = ({
17-
className,
17+
export const ByLookShelf: FC<Props & React.HTMLProps<HTMLDivElement>> = ({
1818
products,
1919
productsPerPage,
2020
title,
21+
variant = 'simple',
2122
}) => {
2223
const isDesktop = useMediaQuery('(min-width: 640px)')
2324

2425
const mediaItemsPerPage = isDesktop ? productsPerPage[1] : productsPerPage[0]
2526

26-
const pagesNumber = Math.ceil(products.length / mediaItemsPerPage)
27+
const pagesNumber = Math.ceil(products!.length / mediaItemsPerPage)
2728

2829
return (
29-
<section className={`${styles.container}`}>
30-
{title && <h1 className={`mb-4 ${className}`}>{title}</h1>}
30+
<section className="w-screen px-4 sm:px-28 pt-24 pb-36">
31+
{title && <h1 className="mb-4 text-center text-5xl">{title}</h1>}
3132
<UIShelf>
3233
{[...Array(pagesNumber)].map((x, page) => {
3334
const firstItem = page * mediaItemsPerPage
3435

3536
return (
3637
<section className="flex wrap justify-around" key={page}>
37-
{products
38+
{products!
3839
.slice(firstItem, firstItem + mediaItemsPerPage)
3940
.map((product: ProductSummary_ProductFragment, idx: number) => (
4041
<ProductSummary
4142
key={idx}
4243
product={product}
43-
variant="advanced"
44+
variant={variant}
4445
/>
4546
))}
4647
</section>
@@ -51,4 +52,40 @@ const Shelf: FC<Props & React.HTMLProps<HTMLDivElement>> = ({
5152
)
5253
}
5354

54-
export default Shelf
55+
export const FindInShelf: FC<Props & React.HTMLProps<HTMLDivElement>> = ({
56+
products,
57+
productsPerPage,
58+
title,
59+
variant = 'simple',
60+
}) => {
61+
const isDesktop = useMediaQuery('(min-width: 640px)')
62+
63+
const mediaItemsPerPage = isDesktop ? productsPerPage[1] : productsPerPage[0]
64+
65+
const pagesNumber = Math.ceil(products!.length / mediaItemsPerPage)
66+
67+
return (
68+
<section className="w-screen px-4 sm:px-28 mb-8 sm:-mt-28 sm:text-white z-10">
69+
{title && <h1 className="mb-4 text-2xl">{title}</h1>}
70+
<UIShelf>
71+
{[...Array(pagesNumber)].map((x, page) => {
72+
const firstItem = page * mediaItemsPerPage
73+
74+
return (
75+
<section className="flex h-28" key={page}>
76+
{products!
77+
.slice(firstItem, firstItem + mediaItemsPerPage)
78+
.map((product: ProductSummary_ProductFragment, idx: number) => (
79+
<ProductSummary
80+
key={idx}
81+
product={product}
82+
variant={variant}
83+
/>
84+
))}
85+
</section>
86+
)
87+
})}
88+
</UIShelf>
89+
</section>
90+
)
91+
}

src/components/sections/ShelfNews/ShelfNews.module.css renamed to src/components/sections/ShelfNews/ShelfNews.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.container {
2-
@apply w-screen sm:pl-28;
3-
}
4-
51
[data-store-carousel] {
62
@apply relative;
73
}

‎src/components/sections/ShelfNews/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import ProductSummary from 'src/components/product/ProductSummary'
77
import type { ProductSummary_ProductFragment } from 'src/components/product/ProductSummary/__generated__/ProductSummary_product.graphql'
88
import imagesConf from 'src/images/config'
99

10-
import * as styles from './ShelfNews.module.css'
10+
import './ShelfNews.css'
1111

1212
interface Props {
1313
products?: ProductSummary_ProductFragment[] | any
@@ -16,7 +16,6 @@ interface Props {
1616
}
1717

1818
const ShelfNews: FC<Props & React.HTMLProps<HTMLDivElement>> = ({
19-
className,
2019
products,
2120
productsPerPage,
2221
title,
@@ -43,7 +42,7 @@ const ShelfNews: FC<Props & React.HTMLProps<HTMLDivElement>> = ({
4342
])
4443

4544
return (
46-
<section className={`${styles.container} ${className} flex`}>
45+
<section className="w-screen sm:pl-28 text-5xl pt-24 flex">
4746
<div className="w-1/2">
4847
<h1 className="mb-4">{title}</h1>
4948
<UIShelf>

‎src/views/home/index.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import React, { lazy, Suspense, SuspenseList } from 'react'
22
import type { FC } from 'react'
33
import type { Props as PageProps } from 'src/pages/index'
4+
import type { ProductSummary_ProductFragment } from 'src/components/product/ProductSummary/__generated__/ProductSummary_product.graphql'
45

5-
const Shelf = lazy(
6-
() =>
7-
import(
8-
/* webpackMode: "eager" */
9-
'src/components/sections/Shelf'
10-
)
6+
const ByLookShelf = React.lazy(() =>
7+
import('src/components/sections/Shelf').then((module) => ({
8+
default: module.ByLookShelf,
9+
}))
1110
)
11+
// const FindInShelf = React.lazy(()=> import('src/components/sections/Shelf').then(module=>({default:module.FindInShelf})))
1212

13-
const ShelfNews = lazy(
14-
() =>
15-
import(
16-
/* webpackMode: "eager" */
17-
'src/components/sections/ShelfNews'
18-
)
19-
)
13+
// const ShelfNews = lazy(
14+
// () =>
15+
// import(
16+
// /* webpackMode: "eager" */
17+
// 'src/components/sections/ShelfNews'
18+
// )
19+
// )
2020

2121
const Seo = lazy(
2222
() =>
@@ -108,24 +108,24 @@ const View: FC<Props> = (props) => {
108108

109109
<Suspense fallback={null}>
110110
<BagsSection />
111-
<Shelf
112-
className="text-center text-6xl"
113-
products={props.data.vtex?.products ?? undefined}
111+
<ByLookShelf
112+
products={
113+
props.data.vtex.products as ProductSummary_ProductFragment[]
114+
}
114115
productsPerPage={[1, 3]}
115116
title="Shop by look"
116117
/>
117118
<SummerCollectionSection />
118-
<Shelf
119-
className="text-2xl"
119+
{/* <FindInShelf
120120
products={props.data.vtex?.products ?? undefined}
121121
productsPerPage={[2, 4]}
122122
title="Find in..."
123-
/>
124-
<ShelfNews
125-
className="text-5xl"
123+
variant="advanced"
124+
/> */}
125+
{/* <ShelfNews
126126
products={props.data.vtex?.products ?? undefined}
127127
productsPerPage={[2, 4]}
128-
/>
128+
/> */}
129129
<ChooseSection />
130130
</Suspense>
131131
</SuspenseList>

0 commit comments

Comments
 (0)