design(preview): replace path input with strict dropdown menu

This commit is contained in:
2026-06-12 12:22:50 -07:00
parent cd26dd807f
commit 2a2962a098

View File

@@ -237,16 +237,6 @@ function PreviewDeviceToggles() {
}}
/>
<span
style={{
opacity: 0.5,
flexShrink: 0,
paddingLeft: 4,
fontFamily: "var(--font-mono), monospace",
}}
>
/
</span>
<div
style={{
flex: 1,
@@ -256,14 +246,9 @@ function PreviewDeviceToggles() {
alignItems: "center",
}}
>
<input
type="text"
list="common-routes"
value={currentPath === "/" ? "" : currentPath.replace(/^\//, "")}
onChange={(e) =>
setCurrentPath("/" + e.target.value.replace(/^\//, ""))
}
placeholder="path (e.g. dashboard)"
<select
value={currentPath}
onChange={(e) => setCurrentPath(e.target.value)}
style={{
background: "transparent",
border: "none",
@@ -274,22 +259,19 @@ function PreviewDeviceToggles() {
textOverflow: "ellipsis",
fontFamily: "var(--font-mono), monospace",
paddingRight: 16,
appearance: "none",
cursor: "pointer",
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
triggerRefresh(); // force reload iframe
}
}}
/>
<datalist id="common-routes">
<option value="dashboard" />
<option value="login" />
<option value="signup" />
<option value="about" />
<option value="contact" />
<option value="pricing" />
<option value="settings" />
</datalist>
>
<option value="/">/</option>
<option value="/dashboard">/dashboard</option>
<option value="/login">/login</option>
<option value="/signup">/signup</option>
<option value="/about">/about</option>
<option value="/contact">/contact</option>
<option value="/pricing">/pricing</option>
<option value="/settings">/settings</option>
</select>
<ChevronDown
size={12}
style={{