4 files changed, 57 insertions, 15 deletions
diff --git a/src/db/schema.ts b/src/db/schema.ts
new file mode 100644
index 0000000..15da652
--- /dev/null
+++ b/src/db/schema.ts
@@ -0,0 +1,5 @@
+import { text, sqliteTable } from "drizzle-orm/sqlite-core";
+
+export const groupsTable = sqliteTable("groups", {
+    name: text("name").notNull(),
+});
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 0000000..71f018f
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,7 @@
+import "typed-htmx";
+
+declare module 'hono/jsx' {
+    namespace JSX {
+        interface HTMLAttributes extends HtmxAttributes { }
+    }
+}
diff --git a/src/index.ts b/src/index.ts
deleted file mode 100644
index bc1cc19..0000000
--- a/src/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { serve } from '@hono/node-server'
-import { Hono } from 'hono'
-
-const app = new Hono()
-
-app.get('/', (c) => {
-  return c.text('Hello Hono!')
-})
-
-serve({
-  fetch: app.fetch,
-  port: 3000
-}, (info) => {
-  console.log(`Server is running on http://localhost:${info.port}`)
-})
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..c72d766
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,45 @@
+import { serve } from "@hono/node-server";
+import { Hono } from "hono";
+import { createClient } from "@libsql/client";
+import { drizzle } from "drizzle-orm/libsql";
+import { groupsTable } from "./db/schema.js";
+
+const app = new Hono();
+const db = drizzle(createClient({ url: "file:data.db" }));
+
+async function Groups() {
+  const result = await db.select().from(groupsTable).all();
+
+  return <ul>{
+    result.map(group => <li>{group.name}</li>)
+  }</ul>;
+}
+
+app.get("/", c => c.html(
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-Akqfrbj/HpNVo8k11SXBb6TlBWmXXlYQrCSqEWmyKJe+hDm3Z/B2WVG4smwBkRVm" crossorigin="anonymous"></script>
+      <title>Uneven</title>
+    </head>
+    <body>
+      <Groups />
+      <button hx-get="/button" hx-swap="outerHTML">click me!</button>
+    </body>
+  </html>
+));
+
+let colors = ["red", "green", "blue"];
+app.get("/button", c => c.html(
+  <button
+    hx-get="/button"
+    hx-swap="outerHTML"
+    style={{ backgroundColor: colors[Math.floor(Math.random() * colors.length)] }}
+  >disco button!</button>
+));
+
+serve({
+  fetch: app.fetch,
+  port: 3000,
+}, info => console.log(`Server is running on http://localhost:${info.port}`));