jbilcke-hf HF staff commited on
Commit
82d85df
β€’
1 Parent(s): 241036e

dynamic paddings and borders

Browse files
src/app/interface/grid/index.tsx ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ "use client"
2
+
3
+ import { ReactNode } from "react"
4
+
5
+ import { cn } from "@/lib/utils"
6
+ import { useStore } from "@/app/store"
7
+
8
+ export function Grid({ children, className }: { children: ReactNode; className: string }) {
9
+ const zoomLevel = useStore(state => state.zoomLevel)
10
+ return (
11
+ <div
12
+ // the "fixed" width ensure our comic keeps a consistent ratio
13
+ className={cn(
14
+ `w-full h-full grid`,
15
+ className
16
+ )}
17
+ style={{
18
+ gap: `${Math.round((zoomLevel / 100) * 8)}px`
19
+ }}
20
+ >
21
+ {children}
22
+ </div>
23
+ )
24
+ }
25
+
26
+
src/app/interface/panel/index.tsx CHANGED
@@ -35,6 +35,8 @@ export function Panel({
35
  const panels = useStore(state => state.panels)
36
  const prompt = panels[panel] || ""
37
 
 
 
38
  // const setCaption = useStore(state => state.setCaption)
39
  // const captions = useStore(state => state.captions)
40
  // const caption = captions[panel] || ""
@@ -160,10 +162,21 @@ export function Panel({
160
  }, [rendered.assetUrl, caption])
161
  */
162
 
163
- if (isLoading) {
 
 
 
 
 
 
 
 
 
 
164
  return (
165
  <div className={cn(
166
- `w-full h-full flex flex-col items-center justify-center`,
 
167
  className
168
  )}>
169
  <Progress isLoading />
@@ -173,12 +186,8 @@ export function Panel({
173
 
174
  return (
175
  <div className={cn(
176
- `w-full h-full`,
177
  { "grayscale": preset.color === "grayscale" },
178
- `border-2 border-stone-900`,
179
- `shadow-sm`,
180
- `rounded-sm`,
181
- `overflow-hidden`,
182
  className
183
  )}>
184
  {rendered.assetUrl && <img
 
35
  const panels = useStore(state => state.panels)
36
  const prompt = panels[panel] || ""
37
 
38
+ const zoomLevel = useStore(state => state.zoomLevel)
39
+
40
  // const setCaption = useStore(state => state.setCaption)
41
  // const captions = useStore(state => state.captions)
42
  // const caption = captions[panel] || ""
 
162
  }, [rendered.assetUrl, caption])
163
  */
164
 
165
+ const frameClassName = cn(
166
+ `w-full h-full`,
167
+ `border-stone-900`,
168
+ `transition-all duration-200 ease-in-out`,
169
+ zoomLevel > 70 ? `border-2` : zoomLevel > 40 ? `border` : `border border-transparent`,
170
+ `shadow-sm`,
171
+ `rounded-sm`,
172
+ `overflow-hidden`,
173
+ )
174
+
175
+ if (prompt && !rendered.assetUrl) {
176
  return (
177
  <div className={cn(
178
+ frameClassName,
179
+ `flex flex-col items-center justify-center`,
180
  className
181
  )}>
182
  <Progress isLoading />
 
186
 
187
  return (
188
  <div className={cn(
189
+ frameClassName,
190
  { "grayscale": preset.color === "grayscale" },
 
 
 
 
191
  className
192
  )}>
193
  {rendered.assetUrl && <img
src/app/layouts/index.tsx CHANGED
@@ -2,17 +2,16 @@
2
 
3
  import { Panel } from "@/app/interface/panel"
4
  import { pick } from "@/lib/pick"
 
5
 
6
  export function Layout1() {
7
  return (
8
- <div
9
- // the "fixed" width ensure our comic keeps a consistent ratio
10
- className="w-full h-full grid grid-cols-2 grid-rows-3 gap-2">
11
  <div className="bg-stone-100">
12
  <Panel
13
  panel={0}
14
  width={1024}
15
- height={512}
16
  />
17
  </div>
18
  <div className="bg-zinc-100 row-span-2">
@@ -33,22 +32,20 @@ export function Layout1() {
33
  <Panel
34
  panel={3}
35
  width={1024}
36
- height={512}
37
  />
38
  </div>
39
- </div>
40
  )
41
  }
42
 
43
  export function Layout2() {
44
  return (
45
- <div
46
- // the "fixed" width ensure our comic keeps a consistent ratio
47
- className="w-full h-full grid grid-cols-2 grid-rows-3 gap-2">
48
  <div className="bg-gray-100 row-span-3 col-span-1">
49
  <Panel
50
  panel={0}
51
- width={512}
52
  height={1024}
53
  />
54
  </div>
@@ -56,43 +53,41 @@ export function Layout2() {
56
  <Panel
57
  panel={1}
58
  width={1024}
59
- height={512}
60
  />
61
  </div>
62
  <div className="bg-stone-100">
63
  <Panel
64
  panel={2}
65
  width={1024}
66
- height={512}
67
  />
68
  </div>
69
  <div className="bg-zinc-100 row-span-1 col-span-1">
70
  <Panel
71
  panel={3}
72
  width={1024}
73
- height={512}
74
  />
75
  </div>
76
- </div>
77
  )
78
  }
79
 
80
  export function Layout3() {
81
  return (
82
- <div
83
- // the "fixed" width ensure our comic keeps a consistent ratio
84
- className="w-full h-full grid grid-cols-5 grid-rows-2 gap-2">
85
  <div className="bg-zinc-100 col-span-3">
86
  <Panel
87
  panel={0}
88
  width={1024}
89
- height={512}
90
  />
91
  </div>
92
  <div className="bg-zinc-100 col-span-2 row-span-2">
93
  <Panel
94
  panel={1}
95
- width={512}
96
  height={1024}
97
  />
98
  </div>
@@ -100,27 +95,25 @@ export function Layout3() {
100
  <div className="bg-stone-100">
101
  <Panel
102
  panel={2}
103
- width={512}
104
  height={758}
105
  />
106
  </div>
107
  <div className="bg-slate-100">
108
  <Panel
109
  panel={3}
110
- width={512}
111
  height={758}
112
  />
113
  </div>
114
  </div>
115
- </div>
116
  )
117
  }
118
 
119
  export function Layout4() {
120
  return (
121
- <div
122
- // the "fixed" width ensure our comic keeps a consistent ratio
123
- className="w-full h-full grid grid-cols-2 grid-rows-3 gap-2">
124
  <div className="bg-slate-100 row-span-2">
125
  <Panel
126
  panel={0}
@@ -132,14 +125,14 @@ export function Layout4() {
132
  <Panel
133
  panel={1}
134
  width={1024}
135
- height={512}
136
  />
137
  </div>
138
  <div className="bg-zinc-100 row-span-2">
139
  <Panel
140
  panel={2}
141
  width={1024}
142
- height={512}
143
  />
144
  </div>
145
  <div className="bg-stone-100">
@@ -149,34 +142,32 @@ export function Layout4() {
149
  height={1024}
150
  />
151
  </div>
152
- </div>
153
  )
154
  }
155
 
156
 
157
  export function Layout5() {
158
  return (
159
- <div
160
- // the "fixed" width ensure our comic keeps a consistent ratio
161
- className="w-full h-full grid grid-cols-3 grid-rows-2 gap-2">
162
  <div className="bg-zinc-100 col-span-1 row-span-1">
163
  <Panel
164
  panel={0}
165
- width={512}
166
  height={768}
167
  />
168
  </div>
169
  <div className="bg-zinc-100 col-span-1 row-span-1">
170
  <Panel
171
  panel={1}
172
- width={512}
173
  height={768}
174
  />
175
  </div>
176
  <div className="bg-stone-100 row-span-2 col-span-1">
177
  <Panel
178
  panel={2}
179
- width={512}
180
  height={1024}
181
  />
182
  </div>
@@ -184,36 +175,34 @@ export function Layout5() {
184
  <Panel
185
  panel={3}
186
  width={1024}
187
- height={512}
188
  />
189
  </div>
190
- </div>
191
  )
192
  }
193
 
194
  export function Layout6() {
195
  return (
196
- <div
197
- // the "fixed" width ensure our comic keeps a consistent ratio
198
- className="w-full h-full grid grid-cols-3 grid-rows-2 gap-2">
199
  <div className="bg-zinc-100 col-span-2 row-span-1">
200
  <Panel
201
  panel={0}
202
  width={1024}
203
- height={512}
204
  />
205
  </div>
206
  <div className="bg-zinc-100 col-span-1 row-span-1">
207
  <Panel
208
  panel={1}
209
- width={512}
210
  height={768}
211
  />
212
  </div>
213
  <div className="bg-stone-100 row-span-1 col-span-1">
214
  <Panel
215
  panel={2}
216
- width={512}
217
  height={768}
218
  />
219
  </div>
@@ -221,10 +210,10 @@ export function Layout6() {
221
  <Panel
222
  panel={3}
223
  width={1024}
224
- height={512}
225
  />
226
  </div>
227
- </div>
228
  )
229
  }
230
 
 
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-3">
 
 
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">
 
32
  <Panel
33
  panel={3}
34
  width={1024}
35
+ height={768}
36
  />
37
  </div>
38
+ </Grid>
39
  )
40
  }
41
 
42
  export function Layout2() {
43
  return (
44
+ <Grid className="grid-cols-2 grid-rows-3">
 
 
45
  <div className="bg-gray-100 row-span-3 col-span-1">
46
  <Panel
47
  panel={0}
48
+ width={768}
49
  height={1024}
50
  />
51
  </div>
 
53
  <Panel
54
  panel={1}
55
  width={1024}
56
+ height={768}
57
  />
58
  </div>
59
  <div className="bg-stone-100">
60
  <Panel
61
  panel={2}
62
  width={1024}
63
+ height={768}
64
  />
65
  </div>
66
  <div className="bg-zinc-100 row-span-1 col-span-1">
67
  <Panel
68
  panel={3}
69
  width={1024}
70
+ height={768}
71
  />
72
  </div>
73
+ </Grid>
74
  )
75
  }
76
 
77
  export function Layout3() {
78
  return (
79
+ <Grid className="grid-cols-5 grid-rows-2">
 
 
80
  <div className="bg-zinc-100 col-span-3">
81
  <Panel
82
  panel={0}
83
  width={1024}
84
+ height={768}
85
  />
86
  </div>
87
  <div className="bg-zinc-100 col-span-2 row-span-2">
88
  <Panel
89
  panel={1}
90
+ width={768}
91
  height={1024}
92
  />
93
  </div>
 
95
  <div className="bg-stone-100">
96
  <Panel
97
  panel={2}
98
+ width={768}
99
  height={758}
100
  />
101
  </div>
102
  <div className="bg-slate-100">
103
  <Panel
104
  panel={3}
105
+ width={768}
106
  height={758}
107
  />
108
  </div>
109
  </div>
110
+ </Grid>
111
  )
112
  }
113
 
114
  export function Layout4() {
115
  return (
116
+ <Grid className="grid-cols-2 grid-rows-3">
 
 
117
  <div className="bg-slate-100 row-span-2">
118
  <Panel
119
  panel={0}
 
125
  <Panel
126
  panel={1}
127
  width={1024}
128
+ height={768}
129
  />
130
  </div>
131
  <div className="bg-zinc-100 row-span-2">
132
  <Panel
133
  panel={2}
134
  width={1024}
135
+ height={768}
136
  />
137
  </div>
138
  <div className="bg-stone-100">
 
142
  height={1024}
143
  />
144
  </div>
145
+ </Grid>
146
  )
147
  }
148
 
149
 
150
  export function Layout5() {
151
  return (
152
+ <Grid className="grid-cols-3 grid-rows-2">
 
 
153
  <div className="bg-zinc-100 col-span-1 row-span-1">
154
  <Panel
155
  panel={0}
156
+ width={768}
157
  height={768}
158
  />
159
  </div>
160
  <div className="bg-zinc-100 col-span-1 row-span-1">
161
  <Panel
162
  panel={1}
163
+ width={768}
164
  height={768}
165
  />
166
  </div>
167
  <div className="bg-stone-100 row-span-2 col-span-1">
168
  <Panel
169
  panel={2}
170
+ width={768}
171
  height={1024}
172
  />
173
  </div>
 
175
  <Panel
176
  panel={3}
177
  width={1024}
178
+ height={768}
179
  />
180
  </div>
181
+ </Grid>
182
  )
183
  }
184
 
185
  export function Layout6() {
186
  return (
187
+ <Grid className="grid-cols-3 grid-rows-2">
 
 
188
  <div className="bg-zinc-100 col-span-2 row-span-1">
189
  <Panel
190
  panel={0}
191
  width={1024}
192
+ height={768}
193
  />
194
  </div>
195
  <div className="bg-zinc-100 col-span-1 row-span-1">
196
  <Panel
197
  panel={1}
198
+ width={768}
199
  height={768}
200
  />
201
  </div>
202
  <div className="bg-stone-100 row-span-1 col-span-1">
203
  <Panel
204
  panel={2}
205
+ width={768}
206
  height={768}
207
  />
208
  </div>
 
210
  <Panel
211
  panel={3}
212
  width={1024}
213
+ height={768}
214
  />
215
  </div>
216
+ </Grid>
217
  )
218
  }
219
 
src/app/main.tsx CHANGED
@@ -75,16 +75,23 @@ export default function Main() {
75
  )}>
76
  <div className="flex flex-col items-center w-full">
77
  <div
78
- // we are trying to reach a "book" look
79
- // we are using aspect-[297/210] because it matches A4 (297mm x 210mm)
80
  className={cn(
81
- `flex flex-col items-center justify-start aspect-[210/297]`,
 
 
 
 
 
 
82
  `transition-all duration-100 ease-in-out`,
83
- `p-4`,
84
  `border border-stone-200`,
85
  `shadow-2xl`
86
  )}
87
- style={{ width: `${zoomLevel}%` }}
 
 
 
88
  >
89
  <LayoutElement />
90
  </div>
 
75
  )}>
76
  <div className="flex flex-col items-center w-full">
77
  <div
78
+
 
79
  className={cn(
80
+ `flex flex-col items-center justify-start`,
81
+
82
+ // we are trying to reach a "book" look
83
+ // we are using aspect-[297/210] because it matches A4 (297mm x 210mm)
84
+ // `aspect-[210/297]`,
85
+ `aspect-[250/297]`,
86
+
87
  `transition-all duration-100 ease-in-out`,
 
88
  `border border-stone-200`,
89
  `shadow-2xl`
90
  )}
91
+ style={{
92
+ width: `${zoomLevel}%`,
93
+ padding: `${Math.round((zoomLevel / 100) * 16)}px`
94
+ }}
95
  >
96
  <LayoutElement />
97
  </div>