forked from crowetic/commerce
4 types of layout grids
This commit is contained in:
parent
b1e6aa25b5
commit
cf9495e6c2
@ -1,5 +1,5 @@
|
|||||||
.root {
|
.root {
|
||||||
@apply relative w-full h-full p-6 box-border overflow-hidden;
|
@apply relative w-full p-6 box-border overflow-hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.productTitle {
|
.productTitle {
|
||||||
|
@ -16,6 +16,7 @@ interface ProductData {
|
|||||||
|
|
||||||
const ProductCard: FC<Props> = ({ className, productData }) => {
|
const ProductCard: FC<Props> = ({ className, productData }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
{/* Overlay */}
|
{/* Overlay */}
|
||||||
@ -30,18 +31,17 @@ const ProductCard: FC<Props> = ({ className, productData }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={s.wishlistButton}>
|
<div className={s.wishlistButton}>
|
||||||
<Heart />
|
<Heart />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="absolute box-border top-0 left-0 w-full h-full z-0 m-12">
|
{/* <div className="absolute box-border top-0 left-0 w-full z-0 m-12"> */}
|
||||||
{/* <img
|
{/* <img
|
||||||
className="object-cover object-center w-full"
|
className="object-cover object-center w-full"
|
||||||
src={productData.images.edges[0].node.urlSmall}
|
src={productData.images.edges[0].node.urlSmall}
|
||||||
/> */}
|
/> */}
|
||||||
</div>
|
{/* </div> */}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,23 +1,23 @@
|
|||||||
.root {
|
.root {
|
||||||
--row-height: calc(100vh - 80px - 56px);
|
--row-height: calc(100vh - 80px - 56px);
|
||||||
@apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full;
|
@apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
@apply row-span-1 lg:col-span-1 h-full bg-black box-border;
|
@apply row-span-1 lg:col-span-1 bg-black border border-yellow-300 box-border overflow-hidden;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
|
max-height: 800px;
|
||||||
|
|
||||||
@screen lg {
|
@screen lg {
|
||||||
height: auto;
|
height: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layoutA {
|
||||||
& > div:nth-child(6n + 1),
|
& > div:nth-child(6n + 1),
|
||||||
& > div:nth-child(6n + 5) {
|
& > div:nth-child(6n + 5) {
|
||||||
@apply row-span-2 lg:col-span-2 bg-violet;
|
@apply row-span-2 lg:col-span-2 bg-violet;
|
||||||
|
height: var(--row-height);
|
||||||
@screen lg {
|
|
||||||
min-height: var(--row-height);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& > div:nth-child(6n + 5) {
|
& > div:nth-child(6n + 5) {
|
||||||
@ -32,3 +32,55 @@
|
|||||||
@apply bg-cyan;
|
@apply bg-cyan;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layoutB {
|
||||||
|
& > div:nth-child(6n + 2) {
|
||||||
|
@apply row-span-2 lg:col-span-2 bg-violet;
|
||||||
|
height: var(--row-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div:nth-child(6n + 4) {
|
||||||
|
@apply row-span-2 lg:col-span-2 bg-blue;
|
||||||
|
height: var(--row-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div:nth-child(6n + 3) {
|
||||||
|
@apply bg-pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div:nth-child(6n + 6) {
|
||||||
|
@apply bg-cyan;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layoutC {
|
||||||
|
& > div:nth-child(12n + 1) {
|
||||||
|
@apply row-span-2 lg:col-span-2 bg-violet;
|
||||||
|
height: var(--row-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div:nth-child(12n + 8) {
|
||||||
|
@apply row-span-2 lg:col-span-2 bg-cyan;
|
||||||
|
height: var(--row-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div:nth-child(6n + 3) {
|
||||||
|
@apply bg-pink;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layoutD {
|
||||||
|
& > div:nth-child(12n + 2) {
|
||||||
|
@apply row-span-2 lg:col-span-2 bg-violet;
|
||||||
|
height: var(--row-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div:nth-child(12n + 7) {
|
||||||
|
@apply row-span-2 lg:col-span-2 bg-cyan;
|
||||||
|
height: var(--row-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div:nth-child(6n + 3) {
|
||||||
|
@apply bg-pink;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -6,10 +6,20 @@ interface Props {
|
|||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
products: [any] | any
|
products: [any] | any
|
||||||
|
layout?: 'A' | 'B' | 'C' | 'D'
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProductView: FC<Props> = ({ products, className }) => {
|
const ProductView: FC<Props> = ({ products, className, layout = 'A' }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(
|
||||||
|
s.root,
|
||||||
|
{
|
||||||
|
[s.layoutA]: layout === 'A',
|
||||||
|
[s.layoutB]: layout === 'B',
|
||||||
|
[s.layoutC]: layout === 'C',
|
||||||
|
[s.layoutD]: layout === 'D',
|
||||||
|
},
|
||||||
|
className
|
||||||
|
)
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
{products.map((data: any) => (
|
{products.map((data: any) => (
|
||||||
|
@ -16,17 +16,12 @@ export default function Home({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProductGrid
|
<ProductGrid
|
||||||
products={[
|
products={[...products, ...products, ...products, ...products]}
|
||||||
...products,
|
layout="C"
|
||||||
...products,
|
|
||||||
...products,
|
|
||||||
...products,
|
|
||||||
...products,
|
|
||||||
...products,
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
<div>asdsasad</div>
|
{/* <ProductGrid products={[...products.slice(0, 3)]} layout={2} /> */}
|
||||||
<ProductGrid products={products.slice(3)} />
|
{/* <div></div> */}
|
||||||
|
{/* <ProductGrid products={products.slice(3)} /> */}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user