1import { getTitle } from '../../helpers/title';
2import mdx from './Transforms.mdx';
3
4export default {
5    title: getTitle(__filename, false),
6    parameters: {
7        docs: {
8            page: mdx,
9        },
10    },
11};
12
13const demoItemClasses =
14    'user-select flex items-center p-4 justify-center bg-primary rounded-sm text-center';
15
16const demoContainerClasses = 'border rounded w-full relative flex p-4 items-center justify-space-around';
17
18export const Mirror = () => {
19    return (
20        <div className={demoContainerClasses}>
21            <div className={`${demoItemClasses} mirror`} style={{ width: '5rem', height: '5rem' }}>
22                Mirror
23            </div>
24        </div>
25    );
26};
27
28export const RotateX180 = () => {
29    return (
30        <div className={demoContainerClasses}>
31            <div className={`${demoItemClasses} rotateX-180`} style={{ height: '5rem' }}>
32                RotateX(180deg)
33            </div>
34        </div>
35    );
36};
37
38export const RotateZ90 = () => {
39    return (
40        <div className={demoContainerClasses}>
41            <div className={`${demoItemClasses} rotateZ-90`} style={{ height: '5rem' }}>
42                RotateZ(90deg)
43            </div>
44        </div>
45    );
46};
47
48export const RotateZ270 = () => {
49    return (
50        <div className={demoContainerClasses}>
51            <div className={`${demoItemClasses} rotateZ-270`} style={{ height: '5rem' }}>
52                RotateZ(270deg)
53            </div>
54        </div>
55    );
56};