Hugging Face's logo

Spaces:
sub314xxl
/
ai-comic-factory
Sleeping

App Files Community
jbilcke-hf HF staff commited on
Commit
345a592
•
1 Parent(s): cb3fdda

for later

Browse files
Files changed (1) hide show
  1. src/app/layouts/new_layouts.tsx +273 -0
src/app/layouts/new_layouts.tsx CHANGED
@@ -0,0 +1,273 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ "use client"
2
+
3
+ import { Panel } from "@/app/interface/panel"
4
+ import { pick } from "@/lib/pick"
5
+ import { Grid } from "@/app/interface/grid"
6
+
7
+ export function Layout1() {
8
+ return (
9
+ <Grid className="grid-cols-2 grid-rows-4">
10
+ <div className="bg-stone-100">
11
+ <Panel
12
+ panel={0}
13
+ width={1024}
14
+ height={768}
15
+ />
16
+ </div>
17
+ <div className="bg-zinc-100 row-span-2">
18
+ <Panel
19
+ panel={1}
20
+ width={512}
21
+ height={1024}
22
+ />
23
+ </div>
24
+ <div className="bg-gray-100 row-span-2 col-span-1">
25
+ <Panel
26
+ panel={2}
27
+ width={512}
28
+ height={1024}
29
+ />
30
+ </div>
31
+ <div className="bg-slate-100">
32
+ <Panel
33
+ panel={3}
34
+ width={1024}
35
+ height={768}
36
+ />
37
+ </div>
38
+ <div className="bg-slate-100 row-span-1 col-span-2">
39
+ <Panel
40
+ panel={4}
41
+ width={1024}
42
+ height={512}
43
+ />
44
+ </div>
45
+ </Grid>
46
+ )
47
+ }
48
+
49
+ export function Layout2() {
50
+ return (
51
+ <Grid className="grid-cols-2 grid-rows-3">
52
+ <div className="bg-gray-100 row-span-2 col-span-1">
53
+ <Panel
54
+ panel={0}
55
+ width={768}
56
+ height={1024}
57
+ />
58
+ </div>
59
+ <div className="bg-gray-100 row-span-1 col-span-1">
60
+ <Panel
61
+ panel={1}
62
+ width={1024}
63
+ height={1024}
64
+ />
65
+ </div>
66
+ <div className="bg-slate-100">
67
+ <Panel
68
+ panel={2}
69
+ width={1024}
70
+ height={768}
71
+ />
72
+ </div>
73
+ <div className="bg-stone-100">
74
+ <Panel
75
+ panel={3}
76
+ width={1024}
77
+ height={768}
78
+ />
79
+ </div>
80
+ <div className="bg-zinc-100 row-span-1 col-span-1">
81
+ <Panel
82
+ panel={4}
83
+ width={1024}
84
+ height={768}
85
+ />
86
+ </div>
87
+ </Grid>
88
+ )
89
+ }
90
+
91
+ export function Layout3() {
92
+ return (
93
+ <Grid className="grid-cols-5 grid-rows-2">
94
+ <div className="bg-zinc-100 col-span-3">
95
+ <Panel
96
+ panel={0}
97
+ width={1024}
98
+ height={1024}
99
+ />
100
+ </div>
101
+ <div className="bg-gray-100 col-span-2 row-span-1">
102
+ <Panel
103
+ panel={1}
104
+ width={512}
105
+ height={1024}
106
+ />
107
+ </div>
108
+ <div className="bg-gray-100 col-span-2 row-span-1">
109
+ <Panel
110
+ panel={2}
111
+ width={512}
112
+ height={1024}
113
+ />
114
+ </div>
115
+ <div className="col-span-3 grid grid-cols-2 gap-2">
116
+ <div className="bg-stone-100">
117
+ <Panel
118
+ panel={3}
119
+ width={512}
120
+ height={1024}
121
+ />
122
+ </div>
123
+ <div className="bg-slate-100">
124
+ <Panel
125
+ panel={4}
126
+ width={512}
127
+ height={1024}
128
+ />
129
+ </div>
130
+ </div>
131
+ </Grid>
132
+ )
133
+ }
134
+
135
+ export function Layout4() {
136
+ return (
137
+ <Grid className="grid-cols-2 grid-rows-3">
138
+ <div className="bg-slate-100 row-span-2">
139
+ <Panel
140
+ panel={0}
141
+ width={768}
142
+ height={1024}
143
+ />
144
+ </div>
145
+ <div className="bg-gray-100 row-span-1 col-span-1">
146
+ <Panel
147
+ panel={1}
148
+ width={1024}
149
+ height={768}
150
+ />
151
+ </div>
152
+ <div className="bg-zinc-100 row-span-2">
153
+ <Panel
154
+ panel={2}
155
+ width={1024}
156
+ height={768}
157
+ />
158
+ </div>
159
+ <div className="bg-stone-100">
160
+ <Panel
161
+ panel={3}
162
+ width={768}
163
+ height={1024}
164
+ />
165
+ </div>
166
+ </Grid>
167
+ )
168
+ }
169
+
170
+
171
+ export function Layout5() {
172
+ return (
173
+ <Grid className="grid-cols-3 grid-rows-3">
174
+ <div className="bg-zinc-100 col-span-2 row-span-1">
175
+ <Panel
176
+ panel={0}
177
+ width={1024}
178
+ height={512}
179
+ />
180
+ </div>
181
+ <div className="bg-zinc-100 col-span-1 row-span-1">
182
+ <Panel
183
+ panel={1}
184
+ width={1024}
185
+ height={768}
186
+ />
187
+ </div>
188
+ <div className="bg-stone-100 row-span-1 col-span-1">
189
+ <Panel
190
+ panel={2}
191
+ width={768}
192
+ height={1024}
193
+ />
194
+ </div>
195
+ <div className="bg-slate-100 row-span-1 col-span-2">
196
+ <Panel
197
+ panel={3}
198
+ width={1024}
199
+ height={1024}
200
+ />
201
+ </div>
202
+ <div className="bg-slate-100 row-span-1 col-span-3">
203
+ <Panel
204
+ panel={4}
205
+ width={1024}
206
+ height={1024}
207
+ />
208
+ </div>
209
+ </Grid>
210
+ )
211
+ }
212
+
213
+ export function Layout6() {
214
+ return (
215
+ <Grid className="grid-cols-3 grid-rows-3">
216
+ <div className="bg-zinc-100 col-span-2 row-span-1">
217
+ <Panel
218
+ panel={0}
219
+ width={1024}
220
+ height={512}
221
+ />
222
+ </div>
223
+ <div className="bg-zinc-100 col-span-1 row-span-1">
224
+ <Panel
225
+ panel={1}
226
+ width={768}
227
+ height={1024}
228
+ />
229
+ </div>
230
+ <div className="bg-stone-100 row-span-1 col-span-1">
231
+ <Panel
232
+ panel={2}
233
+ width={768}
234
+ height={1024}
235
+ />
236
+ </div>
237
+ <div className="bg-slate-100 row-span-2 col-span-2">
238
+ <Panel
239
+ panel={3}
240
+ width={1024}
241
+ height={1024}
242
+ />
243
+ </div>
244
+ <div className="bg-slate-100 row-span-1 col-span-1">
245
+ <Panel
246
+ panel={3}
247
+ width={768}
248
+ height={1024}
249
+ />
250
+ </div>
251
+ </Grid>
252
+ )
253
+ }
254
+
255
+ // export const layouts = { Layout1, Layout2, Layout3, Layout4, Layout5, Layout6 }
256
+ export const allLayouts = {
257
+ // Layout1,
258
+ // Layout2,
259
+ // Layout3,
260
+ // Layout4,
261
+ Layout5,
262
+ // Layout6
263
+ }
264
+
265
+ export type LayoutName = keyof typeof allLayouts
266
+
267
+ export function getRandomLayoutName(): LayoutName {
268
+ return pick(Object.keys(allLayouts) as LayoutName[]) as LayoutName
269
+ }
270
+
271
+ export function getRandomLayoutNames(): LayoutName[] {
272
+ return Object.keys(allLayouts).sort(() => Math.random() - 0.5) as LayoutName[]
273
+ }