All files / src/components/Home ProductSlider.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
 
 
 
 
 
4x
 
4x
32x
32x
 
32x
 
 
 
 
 
 
 
 
 
 
 
 
4x
9x
9x
9x
 
9x
 
 
 
48x
 
 
 
 
import React, { FC, useEffect, useState } from 'react';
import { KsCard, Slider } from 'ag-ems-ui-library';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { useTranslation } from 'react-i18next';
import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 
const styles = require('./Home.module.css');
 
const Product: FC<{ product: any }> = ({ product }) => {
  const { t } = useTranslation();
  const image = getImage(product.thumbnail);
 
  return <KsCard
    classes={styles.Product}
    desktopView={false}
    image={image ? <GatsbyImage image={image} alt={product.name} /> : null}
    title={product.name}
    link={product.slug}
    linkComponent={Link}
  />;
};
 
export const ProductSlider: FC<{
  title?: string;
  products: any[];
}> = ({ title, products }) => {
  const { t } = useTranslation();
  const [key, setKey] = useState<'server' | 'client'>('server');
  useEffect(() => setKey('client'));
 
  return <div className={styles.ProductSlider}>
    {title && <h2 className={styles.ProductSliderTitle}>{title}</h2>}
    <div className={styles.ProductSliderContent}>
      <Slider spaceBetween={20} ariaLabel={title + ' ' + t('slider')} key={key}>
        {products.map(product => <Product key={product.strapiId} product={product} />)}
      </Slider>
    </div>
  </div>;
};