using jsx

2024-02-08 14:42:18 +01:00
parent 5f0c06216d
commit adf5dde73c
5 changed files with 40 additions and 27 deletions
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -6,6 +6,8 @@ import { staticPlugin } from "@elysiajs/static";
 // // @ts-ignore
 // import data from "../package.json";

+import { HomeLayout } from "./layout";
+
 export const server = new Elysia()
  .use(html())
  .use(staticPlugin())
@@ -17,12 +19,11 @@ export const server = new Elysia()
  .onError(({ code, error }) => {
    console.error(code, error);
  })
-  .get("/", () => "Hello World")
+  .get("/", ({html}) => html(<HomeLayout><div>hello world</div></HomeLayout>))

  .listen(Bun.env["PORT"] ?? 3000);


-
 console.log(
  `app is running at ${server.server?.hostname}:${server.server?.port}`,
 );
--- a/frontend/src/layout.tsx
+++ b/frontend/src/layout.tsx
@@ -0,0 +1,23 @@
+import { html } from "@elysiajs/html";
+const HomeLayout = ({ children }: elements.Children) => `
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <script src="https://unpkg.com/htmx.org@1.9.5"></script>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <link href="/public/style.css" rel="stylesheet" type="text/css" />
+        // not working
+        <title>BETH STACK</title>
+    </head>
+    <body class="h-screen w-screen flex flex-col gap-3 items-center justify-center">
+        <span class='text-xl font-semibold'>BETH STACK</span>
+        <div class='flex flex-col items-center justify-center  gap-2 mb-5'>
+            <span class='text-neutral-500 font-semibold'>Bun 1.0</span>
+            <span class='text-violet-500 font-semibold'>Elysia</span>
+            <span class='text-lime-500 font-semibold'>Turso</span>
+            <span class='text-sky-500 font-semibold'>Htmx</span>
+        </div>
+        ${children}
+    </body>
+`;
+
+export { HomeLayout }