all working now...

3 files changed, 50 insertions, 0 deletions

diff --git a/src/components/counter.tsx b/src/components/counter.tsx
new file mode 100644
index 0000000..0e540b8
--- /dev/null
+++ b/src/components/counter.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { useState } from 'react';
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+
+  const handleIncrement = () => setCount((c) => c + 1);
+
+  return (
+    <section className="border-blue-400 -mx-4 mt-4 rounded-sm border border-dashed p-4">
+      <div>Count: {count}</div>
+      <button
+        onClick={handleIncrement}
+        className="rounded-xs bg-black px-2 py-0.5 text-sm text-white"
+      >
+        Increment
+      </button>
+    </section>
+  );
+};
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
new file mode 100644
index 0000000..8cfd9c8
--- /dev/null
+++ b/src/components/footer.tsx
@@ -0,0 +1,18 @@
+export const Footer = () => {
+  return (
+    <footer className="p-6 lg:fixed lg:bottom-0 lg:left-0">
+      <div>
+        visit{' '}
+        <a
+          href="https://waku.gg/"
+          target="_blank"
+          rel="noreferrer"
+          className="mt-4 inline-block underline"
+        >
+          waku.gg
+        </a>{' '}
+        to learn more
+      </div>
+    </footer>
+  );
+};
diff --git a/src/components/header.tsx b/src/components/header.tsx
new file mode 100644
index 0000000..1b03ba5
--- /dev/null
+++ b/src/components/header.tsx
@@ -0,0 +1,11 @@
+import { Link } from 'waku';
+
+export const Header = () => {
+  return (
+    <header className="flex items-center gap-4 p-6 lg:fixed lg:left-0 lg:top-0">
+      <h2 className="text-lg font-bold tracking-tight">
+        <Link to="/">Waku starter</Link>
+      </h2>
+    </header>
+  );
+};