shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 12:37:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix react example styling

Browse Source
This commit is contained in:
dswbx
2025-03-15 16:44:58 +01:00
parent 2531c2d8d4
commit ea2aa7c76c
4 changed files with 85 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
examples/react/src/routes/_index.tsx
View File

@@ -12,73 +12,72 @@ export default function IndexPage({ app }: { app: App }) {
const total = todos?.body.meta.total || 0;
return (
<div id="app">
<Center className="flex-col gap-10 max-w-96 mx-auto text-lg">
<div className="flex flex-col gap-2 items-center">
<img src="/bknd.svg" alt="bknd" className="w-48 dark:invert" />
<p className="font-mono">local</p>
</div>
<Center className="flex-col gap-10 max-w-96 mx-auto">
<div className="flex flex-col gap-2 items-center">
<img src="/bknd.svg" alt="bknd" className="w-48 dark:invert" />
<p className="font-mono">local</p>
</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? ({total})</code>
</h2>
<div className="flex flex-col w-full gap-2">
{total > limit && (
<div className="bg-foreground/10 flex justify-center p-1 text-xs rounded text-foreground/40">
{total - limit} more todo(s) hidden
</div>
)}
<div className="flex flex-col gap-3">
{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 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? ({total})</code>
</h2>
<div className="flex flex-col w-full gap-2">
{total > limit && (
<div className="bg-foreground/10 flex justify-center p-1 text-xs rounded text-foreground/40">
{total - limit} more todo(s) hidden
</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 className="flex flex-col gap-3">
{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">
<div className="flex flex-col items-center gap-1">
<a href="/admin">Go to Admin ➝</a>
{/*<div className="opacity-50 text-sm">
{user ? (
<p>
Authenticated as <b>{user.email}</b>
@@ -87,8 +86,7 @@ export default function IndexPage({ app }: { app: App }) {
<a href="/admin/auth/login">Login</a>
)}
</div>*/}
</div>
</Center>
</div>
</div>
</Center>
);
}

1
examples/react/src/routes/admin.tsx
View File

@@ -1,5 +1,6 @@
import { Admin, type BkndAdminProps } from "bknd/ui";
import type { App } from "bknd";
import "bknd/dist/styles.css";
export default function AdminPage({
app,