generated from mantinedev/next-pages-template
-
-
Notifications
You must be signed in to change notification settings - Fork 258
/
LayoutPreview.tsx
125 lines (116 loc) · 3.39 KB
/
LayoutPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { Flex, Group, Indicator, Paper, Stack, createStyles } from '@mantine/core';
import { Logo } from '~/components/layout/Common/Logo';
import { createDummyArray } from '~/tools/client/arrays';
type LayoutPreviewProps = {
showLeftSidebar: boolean;
showRightSidebar: boolean;
showPings: boolean;
};
export const LayoutPreview = ({
showLeftSidebar,
showRightSidebar,
showPings,
}: LayoutPreviewProps) => {
const { classes } = useStyles();
return (
<Stack spacing="xs">
<Paper px="xs" py={4} withBorder>
<Group position="apart">
<div style={{ flex: 1 }}>
<Logo size="xs" />
</div>
<BaseElement width={60} height={10} />
<Group style={{ flex: 1 }} position="right">
<BaseElement width={10} height={10} />
</Group>
</Group>
</Paper>
<Flex gap={6}>
{showLeftSidebar && (
<Paper className={classes.secondaryWrapper} p="xs" withBorder>
<Flex gap={5} wrap="wrap" align="end" w={65}>
{createDummyArray(5).map((_item, index) => (
<PlaceholderElement
height={index % 4 === 0 ? 60 + 5 : 30}
width={30}
key={`example-item-right-sidebard-${index}`}
index={index}
showPing={showPings}
/>
))}
</Flex>
</Paper>
)}
<Paper className={classes.primaryWrapper} p="xs" withBorder>
<Flex gap={5} wrap="wrap">
{createDummyArray(10).map((_item, index) => (
<PlaceholderElement
height={30}
width={index % 5 === 0 ? 60 + 5 : 30}
key={`example-item-main-${index}`}
index={index}
showPing={showPings}
/>
))}
</Flex>
</Paper>
{showRightSidebar && (
<Paper className={classes.secondaryWrapper} p="xs" withBorder>
<Flex gap={5} align="start" wrap="wrap" w={65}>
{createDummyArray(5).map((_item, index) => (
<PlaceholderElement
height={30}
width={index % 4 === 0 ? 60 + 5 : 30}
key={`example-item-right-sidebard-${index}`}
index={index}
showPing={showPings}
/>
))}
</Flex>
</Paper>
)}
</Flex>
</Stack>
);
};
const useStyles = createStyles((theme) => ({
primaryWrapper: {
flexGrow: 2,
},
secondaryWrapper: {
flexGrow: 1,
maxWidth: 100,
},
}));
const BaseElement = ({ height, width }: { height: number; width: number }) => (
<Paper
sx={(theme) => ({
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[1],
})}
h={height}
p={2}
w={width}
/>
);
type PlaceholderElementProps = {
height: number;
width: number;
showPing: boolean;
index: number;
};
const PlaceholderElement = ({ height, width, showPing, index }: PlaceholderElementProps) => {
if (showPing) {
return (
<Indicator
position="bottom-end"
size={5}
offset={10}
color={index % 4 === 0 ? 'red' : 'green'}
zIndex={0}
>
<BaseElement width={width} height={height} />
</Indicator>
);
}
return <BaseElement width={width} height={height} />;
};