1import mdx from './ResponsiveUtilities.mdx';
2
3export default {
4    title: 'Css utilities/Responsive',
5    parameters: {
6        docs: {
7            page: mdx,
8        },
9    },
10};
11
12const demoItemClasses = 'flex items-center justify-center bg-primary user-select';
13
14export const Responsive = () => {
15    return (
16        <div className="border rounded overflow-hidden w-full relative flex text-2xs">
17            <div className="bg-primary rounded-sm">
18                <div
19                    className={`${demoItemClasses} pl-4 sm:pl-8 md:pl-10 lg:pl-12 xl:pl-14`}
20                    style={{ backgroundColor: 'rgba(0,0,0,.2)' }}
21                >
22                    <div
23                        className="flex items-center justify-center bg-primary"
24                        style={{ height: '3rem', width: '3rem' }}
25                    ></div>
26                </div>
27            </div>
28        </div>
29    );
30};
31
32Responsive.parameters = {
33    docs: {
34        iframeHeight: '100px',
35        inlineStories: false,
36    },
37    layout: 'fullscreen',
38};