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

39
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 () { export default function () {
return ( return (
<>
<LumeIdentity />
<LumeProvider> <LumeProvider>
<LumeDashboard /> <Lume />
</LumeProvider> </LumeProvider>
</>
); );
} }

13
src/pages/index.astro
View File

@ -1,6 +1,6 @@
--- ---
import "@/styles/globals.scss";
import "@lumeweb/sdk/lib/style.css"; import "@lumeweb/sdk/lib/style.css";
import "@/styles/globals.scss";
import ArrowSvg from "@/components/Arrow"; import ArrowSvg from "@/components/Arrow";
import Lume from "../components/Lume"; import Lume from "../components/Lume";
--- ---
@ -15,18 +15,21 @@ import Lume from "../components/Lume";
</head> </head>
<body> <body>
<main class="flex min-h-screen flex-col items-center justify-between"> <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 <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 <button
class="absolute bg-neutral-700 text-neutral-400 px-4 py-2 right-0 rounded-r-full" class="absolute bg-neutral-700 text-neutral-400 px-4 py-2 right-0 rounded-r-full"
> >
Navigate 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> </button>
</div> </div>
<div class="w-32 flex justify-end">
<Lume client:only="react" />
</div>
</header> </header>
</main> </main>
</body> </body>