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")); const Admin = lazy(() => import("~/routes/admin"));
import { Center } from "~/components/Center"; import { Center } from "~/components/Center";
import { ClientProvider } from "bknd/client"; import { ClientProvider } from "bknd/client";
import "bknd/dist/styles.css";
export default function () { export default function () {
const [app, setApp] = useState<App | undefined>(undefined); 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; const total = todos?.body.meta.total || 0;
return ( return (
<div id="app"> <Center className="flex-col gap-10 max-w-96 mx-auto">
<Center className="flex-col gap-10 max-w-96 mx-auto text-lg"> <div className="flex flex-col gap-2 items-center">
<div className="flex flex-col gap-2 items-center"> <img src="/bknd.svg" alt="bknd" className="w-48 dark:invert" />
<img src="/bknd.svg" alt="bknd" className="w-48 dark:invert" /> <p className="font-mono">local</p>
<p className="font-mono">local</p> </div>
</div>
<div className="flex flex-col border border-foreground/15 w-full py-4 px-5 gap-2"> <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"> <h2 className="font-mono mb-1 opacity-70">
<code>What's next? ({total})</code> <code>What's next? ({total})</code>
</h2> </h2>
<div className="flex flex-col w-full gap-2"> <div className="flex flex-col w-full gap-2">
{total > limit && ( {total > limit && (
<div className="bg-foreground/10 flex justify-center p-1 text-xs rounded text-foreground/40"> <div className="bg-foreground/10 flex justify-center p-1 text-xs rounded text-foreground/40">
{total - limit} more todo(s) hidden {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> </div>
<form )}
className="flex flex-row w-full gap-3 mt-2" <div className="flex flex-col gap-3">
key={todos?.map((t) => t.id).join()} {todos?.reverse().map((todo) => (
action={async (formData: FormData) => { <div className="flex flex-row" key={String(todo.id)}>
const title = formData.get("title") as string; <div className="flex flex-row flex-grow items-center gap-3 ml-1">
await $q.create({ title }); <input
}} type="checkbox"
> className="flex-shrink-0 cursor-pointer"
<input defaultChecked={!!todo.done}
type="text" onChange={async () => {
name="title" await $q.update({ done: !todo.done }, todo.id);
placeholder="New todo" }}
className="py-2 px-4 flex flex-grow rounded-sm bg-foreground/10 focus:bg-foreground/20 transition-colors outline-none" />
/> <div className="text-foreground/90 leading-none">{todo.title}</div>
<button type="submit" className="cursor-pointer"> </div>
Add <button
</button> type="button"
</form> className="cursor-pointer grayscale transition-all hover:grayscale-0 text-xs "
onClick={async () => {
await $q._delete(todo.id);
}}
>
❌
</button>
</div>
))}
</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>
<div className="flex flex-col items-center gap-1"> <div className="flex flex-col items-center gap-1">
<a href="/admin">Go to Admin ➝</a> <a href="/admin">Go to Admin ➝</a>
{/*<div className="opacity-50 text-sm"> {/*<div className="opacity-50 text-sm">
{user ? ( {user ? (
<p> <p>
Authenticated as <b>{user.email}</b> Authenticated as <b>{user.email}</b>
@@ -87,8 +86,7 @@ export default function IndexPage({ app }: { app: App }) {
<a href="/admin/auth/login">Login</a> <a href="/admin/auth/login">Login</a>
)} )}
</div>*/} </div>*/}
</div> </div>
</Center> </Center>
</div>
); );
} }

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

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

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

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