template: added cloudflare vite code template

2026-08-03 08:36:01 +00:00 · 2025-11-21 17:55:43 +01:00
parent 000f8d20a8
commit 5d6046b149
26 changed files with 9882 additions and 0 deletions
@@ -0,0 +1,8 @@
+import { Admin, type BkndAdminProps } from "bknd/ui";
+import "bknd/dist/styles.css";
+import { useAuth } from "bknd/client";
+
+export default function AdminPage(props: BkndAdminProps) {
+   const auth = useAuth();
+   return <Admin {...props} withProvider={{ user: auth.user }} />;
+}
@@ -0,0 +1,94 @@
+import { useAuth, useEntityQuery } from "bknd/client";
+import bkndLogo from "../assets/bknd.svg";
+import cloudflareLogo from "../assets/cloudflare.svg";
+import viteLogo from "../assets/vite.svg";
+
+export default function Home() {
+   const auth = useAuth();
+
+   const limit = 5;
+   const { data: todos, ...$q } = useEntityQuery("todos", undefined, {
+      limit,
+      sort: "-id",
+   });
+
+   return (
+      <div className="flex-col gap-10 max-w-96 mx-auto w-full min-h-full flex justify-center items-center">
+         <div className="flex flex-row items-center gap-3">
+            <img src={bkndLogo} alt="bknd" className="w-48 dark:invert" />
+            <div className="font-mono opacity-70">&amp;</div>
+            <div className="flex flex-row gap-2 items-center">
+               <img src={cloudflareLogo} alt="cloudflare" className="h-10" />
+               <div className="font-mono opacity-70">+</div>
+               <img src={viteLogo} alt="vite" className="w-10" />
+            </div>
+         </div>
+
+         <div className="flex flex-col border border-foreground/15 w-full py-4 px-5 gap-2">
+            <h2 className="font-mono mb-1 opacity-70">
+               <code>What's next?</code>
+            </h2>
+            <div className="flex flex-col w-full gap-2">
+               <div className="flex flex-col gap-3">
+                  {todos &&
+                     [...todos].reverse().map((todo) => (
+                        <div className="flex flex-row" key={String(todo.id)}>
+                           <div className="flex flex-row flex-grow items-center gap-3 ml-1">
+                              <input
+                                 type="checkbox"
+                                 className="flex-shrink-0 cursor-pointer"
+                                 defaultChecked={!!todo.done}
+                                 onChange={async () => {
+                                    await $q.update({ done: !todo.done }, todo.id);
+                                 }}
+                              />
+                              <div className="text-foreground/90 leading-none">{todo.title}</div>
+                           </div>
+                           <button
+                              type="button"
+                              className="cursor-pointer grayscale transition-all hover:grayscale-0 text-xs "
+                              onClick={async () => {
+                                 await $q._delete(todo.id);
+                              }}
+                           >
+                              ❌
+                           </button>
+                        </div>
+                     ))}
+               </div>
+               <form
+                  className="flex flex-row w-full gap-3 mt-2"
+                  key={todos?.map((t) => t.id).join()}
+                  action={async (formData: FormData) => {
+                     const title = formData.get("title") as string;
+                     await $q.create({ title });
+                  }}
+               >
+                  <input
+                     type="text"
+                     name="title"
+                     placeholder="New todo"
+                     className="py-2 px-4 flex flex-grow rounded-sm bg-foreground/10 focus:bg-foreground/20 transition-colors outline-none"
+                  />
+                  <button type="submit" className="cursor-pointer">
+                     Add
+                  </button>
+               </form>
+            </div>
+         </div>
+
+         <div className="flex flex-col items-center gap-1">
+            <a href="/admin">Go to Admin. ➝</a>
+            <div className="opacity-50 text-sm">
+               {auth.user ? (
+                  <p>
+                     Authenticated as <b>{auth.user.email}</b>
+                  </p>
+               ) : (
+                  <a href="/admin/auth/login">Login</a>
+               )}
+            </div>
+         </div>
+      </div>
+   );
+}