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

Dynamic imports

Browse Source
This commit is contained in:
Henrik Larsson
2023-08-08 22:36:13 +02:00
parent 4721cdf365
commit e566c1f451
11 changed files with 99 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/modules/blurb-section/blurb-section.tsx
View File

@@ -1,7 +1,5 @@
import dynamic from 'next/dynamic';
import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
const Card = dynamic(() => import('components/ui/card'));
import { Carousel, CarouselItem } from '@/components/modules/carousel/carousel';
import Card from '@/components/ui/card/card';
import Text from 'components/ui/text';

24
components/modules/filtered-product-list/filtered-product-list.tsx
View File

@@ -1,14 +1,12 @@
'use client'
'use client';
import Text from 'components/ui/text'
import dynamic from 'next/dynamic'
const ProductCard = dynamic(() => import('components/ui/product-card'))
import ProductCard from '@/components/ui/product-card/product-card';
import Text from 'components/ui/text';
interface SliderProps {
products: any
title: string
itemsToShow: number
products: any;
title: string;
itemsToShow: number;
}
const FilteredProductList = ({ title, products, itemsToShow }: SliderProps) => {
@@ -19,17 +17,17 @@ const FilteredProductList = ({ title, products, itemsToShow }: SliderProps) => {
{title}
</Text>
) : (
<Text className="italic mb-4 lg:mb-6 2xl:mb-8" variant="sectionHeading">
<Text className="mb-4 italic lg:mb-6 2xl:mb-8" variant="sectionHeading">
No title provided yet
</Text>
)}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
{products.slice(0, itemsToShow).map((product: any, index: number) => (
<ProductCard key={`${product.id}-${index}`} product={product} />
))}
</div>
</div>
)
}
);
};
export default FilteredProductList
export default FilteredProductList;

4
components/modules/hero/hero.tsx
View File

@@ -1,8 +1,6 @@
import dynamic from 'next/dynamic';
import SanityImage from '@/components/ui/sanity-image/sanity-image';
import Link from 'components/ui/link/link';
import Text from 'components/ui/text/text';
const SanityImage = dynamic(() => import('components/ui/sanity-image'));
interface HeroProps {
variant: string;

43
components/modules/slider/slider.tsx
View File

@@ -1,39 +1,36 @@
import Text from 'components/ui/text'
import dynamic from 'next/dynamic'
import { useEffect, useState } from 'react'
'use client';
import { Carousel, CarouselItem } from 'components/modules/carousel/carousel'
import Text from 'components/ui/text';
import { useEffect, useState } from 'react';
const ProductCard = dynamic(() => import('components/ui/product-card'))
const CategoryCard = dynamic(() => import('components/ui/category-card'))
import CategoryCard from '@/components/ui/category-card/category-card';
import ProductCard from '@/components/ui/product-card/product-card';
import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
interface SliderProps {
products: [] | any
title: string
categories: [] | any
sliderType: String
products: [] | any;
title: string;
categories: [] | any;
sliderType: String;
}
const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
const [items, setItems] = useState([])
const [items, setItems] = useState([]);
useEffect(() => {
if (sliderType === 'products') setItems(products)
else if (sliderType === 'categories') setItems(categories)
}, [])
if (sliderType === 'products') setItems(products);
else if (sliderType === 'categories') setItems(categories);
}, []);
return (
<div className="flex flex-col">
{title ? (
<Text
className="mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
variant="sectionHeading"
>
<Text className="mb-4 px-4 lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16" variant="sectionHeading">
{title}
</Text>
) : (
<Text
className="italic mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
className="mb-4 px-4 italic lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16"
variant="sectionHeading"
>
No title provided yet
@@ -48,7 +45,7 @@ const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
breakpoint: 1024,
settings: {
slidesToShow: 4.5
},
}
}}
>
{items.map((item: any, index: number) => (
@@ -60,7 +57,7 @@ const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
</Carousel>
)}
</div>
)
}
);
};
export default Slider
export default Slider;