Compare commits
3 Commits
65e8d10231
...
1dcf53b92b
Author | SHA1 | Date |
---|---|---|
Juan Di Toro | 1dcf53b92b | |
Juan Di Toro | b899e472bc | |
Juan Di Toro | 4fc6687af1 |
|
@ -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 />
|
||||
<Lume />
|
||||
</LumeProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue