style(demo): make editor preset tabs look like links

Author: orrisroot

demo/src/components/Editor.tsx

@@ -99,13 +99,13 @@ export default function AppEditor({
         <ul>
           {views.map((v) => (
             <li key={v.id}>
-              {v.id === view ? (
-                v.label
-              ) : (
-                <button type="button" onClick={() => handleViewChange(v.id)}>
-                  {v.label}
-                </button>
-              )}
+              <button
+                type="button"
+                className={`view-tab ${v.id === view ? 'active' : ''}`}
+                onClick={() => handleViewChange(v.id)}
+              >
+                {v.label}
+              </button>
             </li>
           ))}
         </ul>

demo/src/styles/editor.scss

@@ -30,6 +30,44 @@ $button-background: #3498db;
         padding-right: 0;
       }
     }
+
+    .view-tab {
+      background: none;
+      border: none;
+      padding: 0;
+      font: inherit;
+      cursor: pointer;
+      color: #555;
+      text-decoration: none;
+      outline: none;
+
+      &:hover {
+        color: #3498db;
+        text-decoration: underline;
+      }
+
+      &:focus-visible {
+        outline: 2px solid #3498db;
+        outline-offset: 2px;
+        border-radius: 2px;
+      }
+
+      &.active {
+        color: #333;
+        font-weight: bold;
+        position: relative;
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          height: 2px;
+          background: #3498db;
+        }
+      }
+    }
   }
   .editor-wrapper {
     flex: 1;