@ubertheme/slider/src/components/ShowCases/showCases.js

UB Slider Module for Magento PWA Studio

import React from 'react';
import { useIntl } from 'react-intl';
import { mergeClasses } from '@magento/venia-ui/lib/classify';
import defaultClasses from "./showCases.css";
import { shape, string } from "prop-types";

import UBSlider from '../Slider';

const ShowCases = props => {
    const { formatMessage } = useIntl();
    const classes = mergeClasses(defaultClasses, props.classes);
    return (
        <div className={classes.root}>
            <div className={classes.insideSlideshow}>
                <h2 className={classes.title}>
                    {formatMessage({
                        id: 'slideShowCase.summerTitle',
                        defaultMessage: 'The Summer Collection'
                    })}
                </h2>
                <p>
                    {formatMessage({
                        id: 'slideShowCase.summerDesc',
                        defaultMessage: 'Affordable Summer Dresses to Shop Now'
                    })}
                </p>
                <h3 className={classes.subTitle}>1. "Default" Animation</h3>
                <UBSlider
                    slideKey={'inside-slideshow'}
                    itemHeight={600}
                    itemWidth={1600}
                    itemMobileWidth={767}
                    autoPlay={true}
                    interval={3000}
                    stopOnInteraction={true}
                    style={'inside'}
                    cssClasses={['']}
                />
                <h3 className={classes.subTitle}>2. "Open" Animation</h3>
                <UBSlider
                    slideKey={'inside-slideshow'}
                    itemHeight={600}
                    itemWidth={1600}
                    itemMobileWidth={767}
                    autoPlay={true}
                    interval={3000}
                    stopOnInteraction={true}
                    style={'inside'}
                    animation={'open'}
                    cssClasses={['']}
                />
                <h3 className={classes.subTitle}>3. "Cube" Animation</h3>
                <UBSlider
                    slideKey={'inside-slideshow'}
                    itemHeight={600}
                    itemWidth={1600}
                    itemMobileWidth={767}
                    autoPlay={true}
                    interval={3000}
                    stopOnInteraction={true}
                    style={'inside'}
                    animation={'cube'}
                    cssClasses={['']}
                />
                <h3 className={classes.subTitle}>4. "Fall" Animation</h3>
                <UBSlider
                    slideKey={'inside-slideshow'}
                    itemHeight={600}
                    itemWidth={1600}
                    itemMobileWidth={767}
                    autoPlay={true}
                    interval={3000}
                    stopOnInteraction={true}
                    style={'inside'}
                    animation={'fall'}
                    cssClasses={['']}
                />
                <h3 className={classes.subTitle}>5. "FoldOut" Animation</h3>
                <UBSlider
                    slideKey={'inside-slideshow'}
                    itemHeight={600}
                    itemWidth={1600}
                    itemMobileWidth={767}
                    autoPlay={true}
                    interval={3000}
                    stopOnInteraction={true}
                    style={'inside'}
                    animation={'foldOut'}
                    cssClasses={['']}
                />
                <h3 className={classes.subTitle}>6. "ScaleOut" Animation</h3>
                <UBSlider
                    slideKey={'inside-slideshow'}
                    itemHeight={600}
                    itemWidth={1600}
                    itemMobileWidth={767}
                    autoPlay={true}
                    interval={3000}
                    stopOnInteraction={true}
                    style={'inside'}
                    animation={'scaleOut'}
                    cssClasses={['']}
                />
            </div>
            <div className={classes.outsideSlideshow}>
                <h2 className={classes.title}>
                    {formatMessage({
                        id: 'slideShowCase.jewelryTitle',
                        defaultMessage: 'Shop by Jewelry'
                    })}
                </h2>
                <p>
                    {formatMessage({
                        id: 'slideShowCase.jewelryDesc',
                        defaultMessage: "It's The Perfect Time To Find a Jewelry Design That's Perfectly You!"
                    })}
                </p>

                <h3 className={classes.subTitle}>"Out side" Style</h3>
                <UBSlider
                    slideKey={'inside-slideshow'}
                    itemHeight={600}
                    itemWidth={1600}
                    itemMobileWidth={767}
                    autoPlay={false}
                    style={'outside'}
                    cssClasses={['']}
                />
            </div>
        </div>
    );
}

ShowCases.propTypes = {
    classes: shape({
        root: string
    })
};

export default ShowCases;