@@ -18,6 +18,16 @@ import {
18
18
import { FrameAppDebuggerViewProfileDialog } from "./frame-app-debugger-view-profile-dialog" ;
19
19
import { FrameApp } from "./frame-app" ;
20
20
21
+ const devicePresets = [
22
+ { name : "iPhone 4" , width : 320 , height : 480 } ,
23
+ { name : "iPhone 5/SE" , width : 320 , height : 568 } ,
24
+ { name : "iPhone 6/7/8" , width : 375 , height : 667 } ,
25
+ { name : "iPhone XR" , width : 414 , height : 896 } ,
26
+ { name : "iPhone 12 Pro" , width : 390 , height : 844 } ,
27
+ { name : "iPhone 14 Pro Max" , width : 430 , height : 932 } ,
28
+ { name : "Pixel 7" , width : 412 , height : 915 } ,
29
+ ] ;
30
+
21
31
type TabValues = "events" | "console" | "notifications" ;
22
32
23
33
type FrameAppDebuggerProps = {
@@ -58,6 +68,9 @@ export function FrameAppDebugger({
58
68
const [ activeTab , setActiveTab ] = useState < TabValues > ( "notifications" ) ;
59
69
const [ viewFidProfile , setViewFidProfile ] = useState < number | null > ( null ) ;
60
70
71
+ const [ frameWidth , setFrameWidth ] = useState < number > ( 0 ) ;
72
+ const [ frameHeight , setFrameHeight ] = useState < number > ( 0 ) ;
73
+
61
74
return (
62
75
< >
63
76
< div className = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[300px_500px_1fr] p-4 gap-4 bg-slate-50 max-w-full w-full" >
@@ -75,6 +88,68 @@ export function FrameAppDebugger({
75
88
</ Button >
76
89
</ WithTooltip >
77
90
</ div >
91
+ < div className = "flex flex-col gap-2" >
92
+ < div className = "flex flex-row items-center gap-2" >
93
+ < div className = "flex flex-col" >
94
+ < label
95
+ htmlFor = "frameWidth"
96
+ className = "text-xs text-gray-500 mb-1"
97
+ >
98
+ Width (px)
99
+ </ label >
100
+ < input
101
+ id = "frameWidth"
102
+ type = "number"
103
+ className = "w-24 h-9 px-2 rounded-md border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
104
+ placeholder = "500"
105
+ min = "100"
106
+ value = { frameWidth || "" }
107
+ onChange = { ( e ) => {
108
+ setFrameWidth ( Number ( e . target . value ) ) ;
109
+ } }
110
+ />
111
+ </ div >
112
+ < div className = "flex flex-col" >
113
+ < label
114
+ htmlFor = "frameHeight"
115
+ className = "text-xs text-gray-500 mb-1"
116
+ >
117
+ Height (px)
118
+ </ label >
119
+ < input
120
+ id = "frameHeight"
121
+ type = "number"
122
+ className = "w-24 h-9 px-2 rounded-md border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
123
+ placeholder = "600"
124
+ min = "100"
125
+ value = { frameHeight || "" }
126
+ onChange = { ( e ) => {
127
+ setFrameHeight ( Number ( e . target . value ) ) ;
128
+ } }
129
+ />
130
+ </ div >
131
+ </ div >
132
+ < div className = "flex flex-col gap-2" >
133
+ < label className = "text-xs text-gray-500 mb-1" >
134
+ Device Presets
135
+ </ label >
136
+ < div className = "flex flex-col gap-2 w-48" >
137
+ { devicePresets . map ( ( preset ) => (
138
+ < Button
139
+ key = { preset . name }
140
+ size = "sm"
141
+ variant = "outline"
142
+ onClick = { ( ) => {
143
+ setFrameWidth ( preset . width ) ;
144
+ setFrameHeight ( preset . height ) ;
145
+ } }
146
+ >
147
+ { preset . name }
148
+ </ Button >
149
+ ) ) }
150
+ </ div >
151
+ </ div >
152
+ </ div >
78
153
</ div >
79
154
< div className = "flex flex-col gap-4 order-0 lg:order-1" >
80
155
< FrameApp
@@ -85,6 +160,8 @@ export function FrameAppDebugger({
85
160
onViewProfile = { async ( params ) => setViewFidProfile ( params . fid ) }
86
161
onFrameAppUpdate = { setFrameApp }
87
162
context = { context }
163
+ width = { frameWidth }
164
+ height = { frameHeight }
88
165
/>
89
166
</ div >
90
167
< div className = "flex flex-row gap-4 order-2 md:col-span-2 lg:col-span-1 lg:order-2" >
0 commit comments