design(preview): replace path input with strict dropdown menu
This commit is contained in:
@@ -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={{
|
||||
|
||||
Reference in New Issue
Block a user