LumeWeb
/
web3browser.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: improved UX

This commit is contained in:
Juan Di Toro 2023-10-10 16:51:24 +02:00
parent 65e8d10231
commit 4fc6687af1
2 changed files with 44 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Lume.tsx
View File

@ -1,12 +1,41 @@
import { LumeIdentity, LumeDashboard, LumeProvider } from "@lumeweb/sdk";
import {
LumeIdentity,
LumeIdentityTrigger,
LumeDashboardTrigger,
LumeDashboard,
useLume,
LumeProvider,
} from "@lumeweb/sdk";
const Lume = () => {
const { isLoggedIn } = useLume();
return (
<>
<LumeIdentity>
<LumeIdentityTrigger asChild>
{!isLoggedIn ? (
<LumeDashboard>
<LumeDashboardTrigger asChild>
<button className="ml-2 w-full rounded-full bg-[hsl(113,49%,55%)] text-black">
Check Status
</button>
</LumeDashboardTrigger>
</LumeDashboard>
) : (
<button className="ml-2 w-full rounded-full bg-[hsl(113,49%,55%)] text-black">
Login
</button>
)}
</LumeIdentityTrigger>
</LumeIdentity>
</>
);
};
export default function () {
return (
<>
<LumeIdentity />
<LumeProvider>
<LumeDashboard />
</LumeProvider>
</>
<LumeProvider>
<Lume />
</LumeProvider>
);
}

13
src/pages/index.astro
View File

@ -1,6 +1,6 @@
---
import "@/styles/globals.scss";
import "@lumeweb/sdk/lib/style.css";
import "@/styles/globals.scss";
import ArrowSvg from "@/components/Arrow";
import Lume from "../components/Lume";
---
@ -15,18 +15,21 @@ import Lume from "../components/Lume";
</head>
<body>
<main class="flex min-h-screen flex-col items-center justify-between">
<header class="relative h-14 px-2 pl-7 py-2 w-full bg-neutral-900">
<header class="relative h-14 px-2 pl-2 py-2 w-full bg-neutral-900 flex">
<div
class="relative h-full w-full rounded-full bg-neutral-800 border border-neutral-700 flex items-center"
class="relative h-full w-full rounded-full bg-neutral-800 border border-neutral-700 flex items-center [>input:focus]:ring-2 [>input:focus]:ring-white"
>
<Lume client:only="react" />
<input class="ml-3 text-gray-300 w-[calc(100%-150px)] h-full bg-transparent focus:ring-0 focus:outline-none focus:border-0"/>
<button
class="absolute bg-neutral-700 text-neutral-400 px-4 py-2 right-0 rounded-r-full"
>
Navigate
<ArrowSvg class="inline-block ml-2 -mt-1 w-5 h-5" />
<ArrowSvg className="inline-block ml-2 -mt-1 w-5 h-5" />
</button>
</div>
<div class="w-32 flex justify-end">
<Lume client:only="react" />
</div>
</header>
</main>
</body>