@@ -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