Horizontal Scroll Content

import React from "react";
import HorizontalScrollContent from 'funda-ui/HorizontalScrollContent';
 
// component styles
import 'funda-ui/HorizontalScrollContent/index.css';
 
const data = [
    <><span className="px-3">apple</span></>,
    <><span className="px-3">apricot</span></>,
    <><span className="px-3">avocado</span></>,
    <><span className="px-3">banana</span></>,
    <><span className="px-3">bell pepper</span></>,
    <><span className="px-3">blackberry</span></>,
    <><span className="px-3">bilberry</span></>,
    <><span className="px-3">black currant</span></>,
    <><span className="px-3">coconut</span></>,
    <><span className="px-3">cranberry</span></>
];
 
 
export default () => {
 
    return (
        <>
 
        <div style={{ width: '350px'}}>
          
            <HorizontalScrollContent 
                data={data}
                slideOffset={50}
                onMove={(dir: number, wrapperWidth: number, realContentWidth: number, moveOffset: number) => {
                    console.log({ dir, wrapperWidth, realContentWidth, moveOffset });
                }}
            />
 
        </div>
 
          
        </>
    );
}