shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-15 20:17:22 +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

1
examples/react/src/App.tsx
View File

@@ -8,7 +8,6 @@ import IndexPage from "~/routes/_index";
const Admin = lazy(() => import("~/routes/admin"));
import { Center } from "~/components/Center";
import { ClientProvider } from "bknd/client";
import "bknd/dist/styles.css";
export default function () {
const [app, setApp] = useState<App | undefined>(undefined);

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,

39
examples/react/src/styles.css
View File

@@ -1,25 +1,28 @@
/* @todo: currently not working nicely */
#app {
@import "tailwindcss";
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #ffffff;
--foreground: #171717;
--background: #0a0a0a;
--foreground: #ededed;
}
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
@theme {
--color-background: var(--background);
--color-foreground: var(--foreground);
}
@theme {
--color-background: var(--background);
--color-foreground: var(--foreground);
}
width: 100%;
min-height: 100dvh;
body {
@apply bg-background text-foreground flex;
font-family: Arial, Helvetica, sans-serif;
}
#root {
width: 100%;
min-height: 100dvh;
}