initial experimental demo page for hyperdrive (#218)

* create button component with disabled prop

* feat(demo): Layout component (#214)

* refactor(form): validation attributes set null instead of false (#215)

* create button component with disabled prop

* refactor: remove unused import

* refactor: clean up nav; new experimental demo

* create button component with disabled prop

* refactor: remove unused import

* refactor: remove unused component

apps/demo/src/components/Nav.astro

@@ -1,8 +1,25 @@
 ---
+const links = [
+  { label: "Home", url: "/" },
+  { label: "Pizza Delivery", url: "/pizza-delivery" },
+  { label: "Job Application", url: "/job-application" },
+  { label: "Docs Examples", url: "/examples" },
+  { label: "Experimental", url: "/experimental" },
+];
 ---
 
 <nav>
-  <a href="/">Home</a> | <a href="/pizza-delivery">Pizza Delivery</a> | <a
-    href="/job-application">Job Application</a
-  > | <a href="/examples">Docs Exaples</a>
+  {links.map((link) => <a href={link.url}>{link.label}</a>)}
 </nav>
+
+<style>
+  nav a::after {
+    content: " | ";
+  }
+  nav a {
+    text-decoration: none;
+  }
+  nav a:hover {
+    text-decoration: underline;
+  }
+</style>

apps/demo/src/pages/experimental/hyperdrive.astro

@@ -0,0 +1,17 @@
+---
+import Layout from "../../components/Layout.astro";
+
+const Counter = {
+  count: 0,
+  increment() {
+    this.count++;
+  },
+  decrement() {
+    this.count--;
+  },
+};
+---
+
+<Layout title="Hyperdrive Experiment">
+  {Counter.count}
+</Layout>

apps/demo/src/pages/experimental/index.astro

@@ -0,0 +1,9 @@
+---
+import Layout from "../../components/Layout.astro";
+---
+
+<Layout title="Experimental Demos">
+  <ul>
+    <li><a href="./experimental/hyperdrive">Hyperdrive</a></li>
+  </ul>
+</Layout>