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

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>
</>
); );
} }

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