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

Compare commits

base: LumeWeb:65e8d102312ded6e439629a7522c3a9c433d3c52
Branches Tags
LumeWeb:master
LumeWeb:develop
LumeWeb:ditorodev
..
compare: LumeWeb:1dcf53b92b483d4319068b55d198dec02127a255
Branches Tags
LumeWeb:master
LumeWeb:develop
LumeWeb:ditorodev

3 Commits
65e8d10231 ... 1dcf53b92b

Author SHA1 Message Date
Juan Di Toro 1dcf53b92b chore: left out stuff 2023-10-10 16:57:17 +02:00
Juan Di Toro b899e472bc feat: add the iframe 2023-10-10 16:54:00 +02:00
Juan Di Toro 4fc6687af1 fix: improved UX 2023-10-10 16:51:24 +02:00
2 changed files with 47 additions and 13 deletions
Show Stats 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>
);
}

17
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";
---
@ -14,20 +14,25 @@ import Lume from "../components/Lume";
<title>Astro</title>
</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">
<main class="flex h-screen max-h-screen flex-col items-center justify-between">
<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>
<iframe id="mainIframe" src="https://google.com" class="w-full h-full">
</iframe>
</main>
</body>
</html>