1import Scroll from './Scroll';
2import mdx from './Scroll.mdx';
3
4export default {
5    component: Scroll,
6    title: 'components/Scroll',
7    parameters: { docs: { page: mdx } },
8};
9
10export const Basic = () => {
11    return (
12        <Scroll className="border" style={{ height: 160 }}>
13            <div className="px-4 text-justify">
14                <p style={{ maxWidth: 400 }}>
15                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus
16                    obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero,
17                    blanditiis quos?
18                </p>
19                <p style={{ maxWidth: 400 }}>
20                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus
21                    obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero,
22                    blanditiis quos?
23                </p>
24                <p style={{ maxWidth: 400 }}>
25                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus
26                    obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero,
27                    blanditiis quos?
28                </p>
29                <p style={{ maxWidth: 400 }}>
30                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus
31                    obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero,
32                    blanditiis quos?
33                </p>
34            </div>
35        </Scroll>
36    );
37};
38
39export const Horizontal = () => {
40    return (
41        <Scroll horizontal className="border">
42            <div className="p-4 flex flex-nowrap">
43                <p className="pr-7" style={{ minWidth: 400 }}>
44                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus
45                    obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero,
46                    blanditiis quos?
47                </p>
48                <p className="pr-7" style={{ minWidth: 400 }}>
49                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus
50                    obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero,
51                    blanditiis quos?
52                </p>
53                <p className="pr-7" style={{ minWidth: 400 }}>
54                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus
55                    obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero,
56                    blanditiis quos?
57                </p>
58                <p style={{ minWidth: 400 }}>
59                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus
60                    obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero,
61                    blanditiis quos?
62                </p>
63            </div>
64        </Scroll>
65    );
66};