feat: Improve the mobile featured products section

getcronit · Aug 7, 2023 · a8a525e · a8a525e
1 parent 299699b
commit a8a525e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/components/molecules/ProductSlider/ProductSlider.tsx b/src/components/molecules/ProductSlider/ProductSlider.tsx
@@ -1,10 +1,10 @@
-import {Box, Heading} from '@chakra-ui/react'
+import {Heading, StackProps} from '@chakra-ui/react'
 import {ShopifyProduct} from '@snek-at/gatsby-theme-shopify'
 import {Slider} from '@snek-at/uikit'
 
 import {ProductCard} from '../ProductCard'
 
-export interface ProductSliderProps {
+export interface ProductSliderProps extends StackProps {
   products: ShopifyProduct[]
   heading?: string
   prefixPath?: string
@@ -15,7 +15,8 @@ export const ProductSlider = ({
   products,
   heading,
   prefixPath,
-  wholesale
+  wholesale,
+  ...stackProps
 }: ProductSliderProps) => {
   return (
     <>
@@ -36,7 +37,8 @@ export const ProductSlider = ({
             base: '15rem',
             sm: 'xs'
           }
-        }}>
+        }}
+        {...stackProps}>
         {products.map((product, index) => (
           <ProductCard
             key={product.id}

diff --git a/src/components/templates/HomeTemplate/FeaturedProductsSection/FeaturedProductsSection.tsx b/src/components/templates/HomeTemplate/FeaturedProductsSection/FeaturedProductsSection.tsx
@@ -8,6 +8,7 @@ import {ProductGrid} from '../../../molecules/ProductGrid'
 import LinkButtonField from '../../../fields/LinkButtonField'
 import * as style from './style'
 import {useAuthentication} from '../../../../services/authentication'
+import {ProductSlider} from '../../../molecules/ProductSlider'
 
 export interface FeaturedProductsSectionProps {
   name: string
@@ -60,12 +61,21 @@ export const FeaturedProducts = ({
             <Bullet color="agt.yellow" w="unset" fontSize="xl" mt="5" mb="10" />
           </Box> */}
           <ProductGrid
+            display={{base: 'none', sm: 'grid'}}
             prefixPath={productsPagePath}
             products={featuredProducts}
             spacing="5"
             columns={{base: 2, md: 3, xl: 4}}
             wholesale={!!user.user}
           />
+          <ProductSlider
+            h={"100%"}
+            display={{base: 'flex', sm: 'none'}}
+            //heading="Ähnliche Produkte"
+            products={featuredProducts}
+            prefixPath="/products"
+            wholesale={!!user.user}
+          />
           <Center mt="10" mb="16">
             <LinkButtonField
               name="littleThingsButton1"

diff --git a/src/components/templates/HomeTemplate/Riesges/RiesgesBottomSection.tsx b/src/components/templates/HomeTemplate/Riesges/RiesgesBottomSection.tsx
@@ -90,7 +90,7 @@ interface IRiesgesBottomSectionProps {}
 
 const RiesgesBottomSection: FC<IRiesgesBottomSectionProps> = () => {
   return (
-    <Flex flexDir={{base: 'column', xl: 'row'}} gap="10" pb="10">
+    <Flex flexDir={{base: 'column', xl: 'row'}} gap="10" pb={{base: "0", sm: "10"}}>
       <Stack flex="1">
         <Field.Text
           as={Heading}